Estoy usando Vanilla JS para aumentar un valor de tamaño de fondo a medida que el usuario se desplaza hacia abajo en la página para crear un efecto de desplazamiento de paralaje. Mi función está a continuación:
const heroBg = document.getElementById('hero'); window.addEventListener( 'scroll', function() { while (heroBg.style.backgroundSize <= '100') { heroBg.style.backgroundSize = 85 + window.pageYOffset/8 + '%'; console.log(heroBg.style.backgroundSize); if (heroBg.style.backgroundSize === '100') { console.log('too big'); break; } } });El problema que tengo es que el ciclo while solo parece ejecutarse una vez y la imagen deja de crecer mucho antes de que el 'backgroundSize' llegue a 100.
No puede verificar <= si usa cadenas. Además, no puede agregar números y cadenas; tienes que usar paréntesis.
const heroBg = document.getElementById('hero'); window.addEventListener( 'scroll', function() { while (parseInt(heroBg.style.backgroundSize) <= 100) { heroBg.style.backgroundSize = (85 + window.pageYOffset/8) + '%'; console.log(heroBg.style.backgroundSize); if (parseInt(heroBg.style.backgroundSize) == 100) { console.log('too big'); break; } } });la propiedad de tamaño de fondo tiene unidades de medida, por ejemplo, px o %, pero también es una propiedad de texto, y para realizar una operación de comparación, primero debe deshacerse de las unidades de medida y luego convertirlas en un número. Sugiero considerar otra opción para realizar la tarea anterior.
const $body = document.querySelector("body"); let viewportHeight = document.documentElement.clientHeight const bgSize = _ => $body.style.backgroundSize = `${(document.documentElement.scrollTop + viewportHeight) / document.documentElement.offsetHeight * 100 * (viewportHeight / 100)}px` bgSize() window.addEventListener("resize", _ => { viewportHeight = document.documentElement.clientHeight bgSize() }) document.addEventListener("scroll", _ => { bgSize() }) * { padding: 0; margin: 0; box-sizing: border-box; } body { height: 300vh; background: radial-gradient(closest-side circle, black 0% 100%, transparent 100%); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }