• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

115
Vistas
¿Puedes establecer un tamaño máximo de fondo con JavaScript?

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.

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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; } } });
almost 3 years ago · Juan Pablo Isaza Denunciar

0

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; }

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda