Reproducir un video al desplazarse (play video on scroll) con GSAP, ScrollTrigger y Lottie en Divi sin plugins

¿Te gustaría añadir un toque dinámico y moderno a tu sitio web creado con Divi y WordPress? En este nuevo y emocionante tutorial gratuito (ver demo), aprenderás a crear una sección principal con un video de fondo que responde al movimiento del scroll. Este impresionante efecto, conocido como «play video on scroll», permite que el video se reproduzca a medida que el usuario se desplaza por la página, captando la atención de manera única y eficaz.

Para lograr este efecto, utilizaremos tres potentes librerías: GSAP, ScrollTrigger, y Lottie, nada de plugins. Estas herramientas nos permitirán sincronizar el video con el desplazamiento del usuario, logrando un efecto fluido y profesional que hará que tu sitio web se destaque.

Para seguir este tutorial debes tener en cuenta los siguientes materiales:

> Pexels: Un banco de videos gratuito donde puedes encontrar videos de alta calidad para tu fondo.
> Video de ejemplo: Descarga el video para realizar el ejercicio.
> Convertidor de Video (MP4 a Lottie JSON): Necesitarás convertir tu video a formato Lottie para integrarlo fácilmente.
> LottieFiles: Debemos publicar el JSON en Lottie para que el video sea accesible y se pueda utilizar dentro de Divi.

Una vez que tengas el video convertido y publicado, necesitarás el siguiente fragmento de código para insertar el video generado en Divi:

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  let lottieContainer = document.querySelector(".ov-scroll-video");

  if (lottieContainer) {
    // Inicializamos la animación de Lottie
    LottieScrollTrigger({
      trigger: ".ov-scroll-video",
      start: "top center",
      endTrigger: ".end-lottie",
      end: `bottom center+=${document.querySelector(".ov-scroll-video").offsetHeight}`,
      renderer: "svg",
      target: ".ov-scroll-video",
      path: "https://lottie.host/fbeb3bee-0aac-4e02-9c69-5f9afe6d69c6/RTNlzTKnA4.json",
      scrub: 2,
    });

    // Crear ScrollTrigger para cambiar posición a relative cuando se alcance "end-lottie"
    gsap.to(".ov-scroll-video", {
      scrollTrigger: {
        trigger: ".end-lottie",
        start: "top center",
        end: "bottom center",
        onEnter: () => lottieContainer.style.position = "absolute",
        onLeaveBack: () => lottieContainer.style.position = "fixed",
      }
    });
  }
});

function LottieScrollTrigger(vars) {
  let playhead = { frame: 0 },
    target = gsap.utils.toArray(vars.target)[0],
    speeds = { slow: "+=2000", medium: "+=1000", fast: "+=500" },
    st = {
      trigger: ".trigger",
      end: speeds[vars.speed] || "+=1000",
      scrub: 1,
      markers: false,
    },
    ctx = gsap.context && gsap.context(),
    animation = lottie.loadAnimation({
      container: target,
      renderer: vars.renderer || "svg",
      loop: false,
      autoplay: false,
      path: vars.path,
      rendererSettings: vars.rendererSettings || {
        preserveAspectRatio: "xMidYMid slice",
      },
    });

  for (let p in vars) {
    st[p] = vars[p];
  }

  animation.addEventListener("DOMLoaded", function () {
    let createTween = function () {
      animation.frameTween = gsap.to(playhead, {
        frame: animation.totalFrames - 1,
        ease: "none",
        onUpdate: () => animation.goToAndStop(playhead.frame, true),
        scrollTrigger: st,
      });
      return () => animation.destroy && animation.destroy();
    };
    ctx && ctx.add ? ctx.add(createTween) : createTween();
  });

  return animation;
}
</script>

Para que el efecto «play video on scroll» funcione de manera óptima y no afecte la velocidad de carga de tu sitio, a continuación te dejo estas recomendaciones:

1. Mantén el video corto: Idealmente, el video no debería durar más de 10 segundos. Entre menos segundos, mejor rendimiento.
2. Sin audio: El video no debe tener sonido para evitar distracciones y mejorar la experiencia del usuario.
3. Comprensión del video: Si el video es de tu creación, asegúrate de comprimirlo al máximo sin perder calidad. Esto reducirá el tamaño del archivo y mejorará la velocidad de carga.
4. Peso del video: Lo ideal es que el video no pese más de 5MB. Menos peso significa un mejor rendimiento en dispositivos móviles y conexiones lentas.

Para aprender cómo implementar este elegante efecto en tu sitio web con Divi y WordPress, simplemente sigue el tutorial paso a paso en el video que he preparado para ti.

Si tienes alguna pregunta o necesitas ayuda en el proceso, no dudes en dejar un comentario. ¡Estoy aquí para ayudarte a mejorar tu sitio web con Divi!