Parallax no fundo CSS do container.

Rafaelini · 14/08/2023

Hola.
Estoy explorando un script vainilla para efecto parallax basado en la posición del background del contenedor.

Acá está el fiddle.

El Javascript trata de modificar la posición del background con un evento scroll

JavaScript:

const parallaxContainer = document.getElementById('parallax');
const parallaxContent = parallaxContainer.querySelector('.parallax-content');

parallaxContainer.addEventListener('scroll', function() {
const scrollTop = parallaxContainer.scrollTop;
parallaxContent.style.transform = `translate(-50%, -${scrollTop}px)`;
});

Pero no está funcionando. No se que tanto se pueda manipular en tiempo real el fondo.

Quisiera mantener la estructura sumamente simple del html Un contenedor y un contenido.

HTML:

<div class="parallax" id="parallax">
  <div class="parallax-content">
    Content at normal speed
  </div>
</div>

¿Alguna idea?

Puko · 31/10/2023

En lugar de parallaxContainer.scrollTop, deberías usar window.scrollY

JavaScript:

  const parallaxContainer = document.getElementById('parallax');
  const parallaxContent = parallaxContainer.querySelector('.parallax-content');

  window.addEventListener('scroll', function() {
    const scrollTop = window.scrollY;
    parallaxContent.style.transform = `translate(-50%, -${scrollTop}px)`;
  });

Rafaelini · 06/11/2023

Oh. Gracias. Funciona muy bien 🙂

Ya tenía rato esta pregunta, pero lo voy a retomar.

Parallax no fundo CSS do container.

Rafaelini

Puko

Rafaelini