Video scrub
Video scrub mapea el progreso del scroll directamente a la posición de reproducción de un vídeo —
haz scroll hacia abajo y el vídeo avanza hacia delante, haz scroll hacia arriba y rebobina,
fotograma a fotograma. Normalmente se usa a pantalla completa dentro de una
escena anclada, pero funciona en cualquier <video>.
Míralo en acción: Video scrub en fancyanimations.com.
Cómo funciona
- Añade el preset Video scrub en un elemento
<video>en sí mismo, o en un contenedor que incluya uno — el plugin encuentra automáticamente su primer<video>descendiente. - Cada vídeo es controlado por exactamente un elemento — el primero de la página que lo
encuentra. Es válido que tanto un contenedor como su
<video>interior lleven el ajuste. - El plugin pausa automáticamente el vídeo y establece
preload="auto"si tú mismo no has fijado un valor de preload. No necesitas tener activados autoplay ni loop. - Como cualquier fila, tiene una ventana de Start/End/From/To/Invert — aquí, From/To describen qué parte del vídeo se reproduce, como un porcentaje de su duración total.
| Ajuste | Significado |
|---|---|
| Start / End | La ventana de scroll (igual que en cualquier fila) |
| From / To | La parte del vídeo reproducida, como % de su duración |
| Invert | Reproduce hacia atrás |
No existe ninguna variable --fa-scroll--video-scrub para CSS personalizado — si necesitas otra
cosa (un recorte, una leyenda) ligada al mismo rango de scroll, añade una fila Custom separada al
mismo elemento. Video scrub también tiene su propio easing, ajustado a lo que tarda el decodificador
del navegador en buscar un fotograma — "Scroll smoothing" no se le aplica. "Sequence children"
tampoco cuenta las filas de Video scrub.
Estructura típica
Una escena anclada: el vídeo se sitúa absoluto y a pantalla completa dentro del escenario, con "Get parent" para que su posición de reproducción siga a toda la sección en vez de a sí mismo, y su ventana ajustada a la ventana anclada de la escena (p. ej. 25–75% en una escena de 300vh). Las leyendas suelen tener sus propias filas en la misma línea de tiempo — ver Recetas avanzadas.
El archivo de vídeo decide si es fluido
El scrubbing busca a través del archivo fotograma a fotograma, y dos decisiones de codificación hacen que eso salte de forma visible:
| Problema | Solución |
|---|---|
| Muy pocos keyframes — cada búsqueda tarda decenas o cientos de milisegundos | Recodifica con cada fotograma como keyframe (en HandBrake: Extra Options keyint=1) |
| Muy pocos fotogramas para la distancia de scroll (4s a 30fps = 120 fotogramas cubriendo ~2700px de scroll) | Alrededor de 300 fotogramas o más — p. ej. 6 segundos a 60fps |
Aparece un botón Check video junto a cada vídeo con scrub en los lienzos de Bricks, Etch y del editor de bloques. Mide el archivo real: el tiempo medio que tarda realmente una búsqueda (más de 50ms significa que necesita más keyframes) y estima el conteo total de fotogramas (menos de 300 se ve con saltos). Nunca aparece en el sitio publicado, de cara al visitante.
- Bricks
- Etch
- Gutenberg
Usa el elemento nativo Video con origen "Media", y añade una fila Video scrub en la pestaña Style → panel ScrollTrigger Animations. Algunas cosas específicas del elemento de vídeo de Bricks:
- Deja Controls desactivado y pon los eventos de puntero del elemento en "none" — sin controles, Bricks sigue añadiendo su propio comportamiento de clic para reproducir/pausar, y un clic interrumpiría el scrub.
- Deja Preload vacío para que el plugin pueda fijar
preload="auto"por ti. - El control nativo "Object fit" apunta correctamente al
<video>interior; paraobject-position, escríbelo en CSS personalizado apuntando directamente a la etiqueta (%root% video { object-position: 50% 30%; }) — Bricks renderiza undivcontenedor alrededor del vídeo y las clases de Fancy caen en ambos.
Añade la clase de Video scrub (y sus clases de ventana) al propio elemento <video>, o a un
contenedor alrededor de él. Da estilo a la propia etiqueta <video> (object-fit,
object-position) en su propia clase como de costumbre.
Usa el bloque nativo Video, activa "Enable scroll trigger" y elige "Video Scrub" como la Animation.
La clase cae en el propio contenedor del bloque, y el plugin encuentra el <video> dentro de él
automáticamente.
Problemas comunes
- El vídeo avanza en saltos pequeños y visibles. Casi siempre son muy pocos fotogramas para la distancia de scroll, no un problema del plugin — apunta a 300+ fotogramas, y confírmalo con Check video (3.2.0+) o probando en Chrome real (algunos navegadores de prueba automatizados no decodifican vídeo H.264 en absoluto).
- Cada búsqueda va por detrás del scroll. El intervalo de keyframes es demasiado largo — recodifica con cada fotograma como keyframe.
- Un clic en el vídeo lo pausa o lo reinicia. Ese es el propio manejador de clics de Bricks en un vídeo sin controles — pon los eventos de puntero en "none" en el elemento.
object-fitno tiene ningún efecto visible, o el vídeo muestra bandas negras. Se aplicó aldivcontenedor en lugar de a la propia etiqueta<video>— usa el control nativo Object fit, o apunta directamente a.your-class video { }en CSS personalizado.