Secciones de vídeo guiadas por el scroll sin arruinar el rendimiento

A las webs premium les encanta una sección fijada en la que el vídeo se abre al hacer scroll y los subtítulos cambian capítulo a capítulo. También es una de las formas más fáciles de conseguir una página entrecortada, pesada y que se come la batería. Así está construida la sección de escaparate de la biblioteca de demos para seguir siendo rápida.

#Un único valor de progreso lo controla todo

La sección es un contenedor alto con un escenario fijo dentro. Al hacer scroll, el script calcula un solo número —cuánto del contenedor ha recorrido el visitante, de 0 a 1— y todo lo demás se deriva de él:

• el margen del clip-path que abre el vídeo enmarcado a todo el ancho,
• un leve escalado del vídeo activo,
• qué capítulo (clip y subtítulo) está activo,
• el ancho de la barra de progreso,
• el fundido y el desplazamiento del titular.

Los valores se escriben como propiedades CSS personalizadas y el CSS hace el resto. No hay líneas de tiempo de animación por elemento que sincronizar ni ninguna librería que descargar.

const p = clamp(-rect.top / (rect.height - innerHeight));
stage.style.setProperty('--p', p);

#Lecturas y escrituras en un solo frame

Los eventos de scroll llegan más a menudo de lo que se refresca la pantalla. El handler solo programa el trabajo con requestAnimationFrame, y cada frame lee primero el layout y luego escribe los estilos. Mezclar lecturas y escrituras fuerza recálculos repetidos: la causa más común de un scroll entrecortado.

#Un solo vídeo en reproducción

Tres vídeos en reproducción automática a la vez calientan el móvil y gastan datos. Las reglas:

• El primer clip se carga de inmediato para que la sección nunca esté vacía.
• Los demás empiezan con preload="none".
• Cuando un capítulo se activa, su clip se reproduce y el clip siguiente pasa a precargarse.
• Los clips inactivos se pausan cuando termina el fundido.
• Cuando la sección entera sale de la pantalla, todo se pausa.

Todos los clips van sin sonido, en bucle y con playsinline, necesario para la reproducción automática en el móvil.

#Anima propiedades baratas

opacity, transform y clip-path puede componerlas la GPU. Animar top, width o background-position en elementos grandes provoca recálculos o repintados. La galería horizontal se mueve con translate3d, y el paralaje de cada tarjeta desplaza una imagen interior mediante una transformación, no cambiando su posición.

#Sirve el vídeo con cabeza

Los clips son 720p, de unos pocos megas cada uno, servidos a través de un proxy edge que los cachea y admite peticiones HTTP por rangos, para que el navegador pueda saltar y hacer streaming. Los pósteres vienen de imágenes estáticas, para que aparezca algo con sentido antes de decodificar el primer frame.

#Respeta el movimiento reducido

Cuando el visitante ha pedido al sistema menos movimiento, la sección deja de fijarse, la galería pasa a ser una fila normal con scroll y el texto aparece sin animación. El contenido es idéntico; solo desaparece la coreografía.

#Defiende tus estilos

La sección se inyecta en muchas plantillas distintas, y una tenía una regla de cuadrícula genérica .gal que encogió en silencio la banda de la galería. Ahora cada clase del componente lleva prefijo. Si haces componentes que acaban en páginas que no controlas, los espacios de nombres no son opcionales.

#Resumen

• Deriva todo de un único valor de progreso.
• Programa con requestAnimationFrame; lee y luego escribe.
• Un solo vídeo en reproducción; precarga a tiempo; pausa fuera de pantalla.
• Anima solo propiedades amigas del compositor.
• Cachea el vídeo y sírvelo por rangos, en el edge.
• Respeta prefers-reduced-motion.
• Pon espacio de nombres a los estilos inyectados.