Parallax en el fondo css del contenedor.

Rafaelini · 2023-08-14T12:12:38-0600

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 Oct 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 · 6 Nov 2023

Oh. Gracias. Funciona muy bien 🙂

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

Parallax en el fondo css del contenedor.

Rafaelini

Puko

Rafaelini