Al utilizar la variedad `scroll()` de las animaciones impulsadas por el desplazamiento (Scroll-Driven Animations), los desarrolladores pueden crear una ilusión visual donde diferentes columnas en una cuadrícula se mueven a diferentes velocidades a medida que un usuario se desplaza hacia abajo en una página. Esta técnica desacopla el movimiento visual del contenido del desplazamiento lineal estándar del visor, permitiendo diseños de galerías creativos que anteriormente eran difíciles de lograr sin una carga pesada de JavaScript.
Mecanismo de desplazamiento de velocidad variable
El mecanismo central se basa en aplicar una transformación direccional a un contenedor específico, como una columna de la derecha en una cuadrícula de dos columnas. En lugar de mover el contenido real a través de un contenedor de desplazamiento, el desarrollador aplica una animación `translateY` que cambia de valor basándose en la posición de desplazamiento del elemento raíz.
Al definir una animación `@keyframes` y vincularla a la línea de tiempo `scroll()`, la columna derecha puede programarse para moverse una distancia mayor que la columna izquierda en la misma distancia de desplazamiento. Por ejemplo, un `translateY` que se mueve de `12vh` a `-20vh` crea un efecto de 'deriva hacia arriba' que hace que el contenido parezca moverse más rápido que la progresión estándar de la página.
“El truco consiste en aplicar una transformación direccional que cambia de valor a medida que nos desplazamos.”
— Multi-Column Different-Speed Scrolling – Master.dev Blog
Superposición de animaciones basadas en la vista
Más allá del movimiento global de las columnas, la variedad `view()` de las animaciones impulsadas por el desplazamiento permite un control granular sobre los elementos individuales dentro de esas columnas. Esto puede usarse para crear 'zoomies': efectos donde una foto se escala o se desplaza ligeramente a medida que pasa por el área visible del usuario.
Debido a que estas animaciones están vinculadas a la línea de tiempo `view()`, el efecto se activa y se revierte automáticamente basándose en la visibilidad del elemento en el visor. Esto permite un movimiento complejo y de múltiples capas donde una columna deriva a una velocidad mientras las imágenes en su interior realizan animaciones independientes y localizadas.
Compensaciones y experiencia del usuario
Si bien estos efectos proporcionan una estética de alta gama, introducen posibles problemas de usabilidad. El desplazamiento no lineal de alta intensidad puede causar mareos o náuseas en algunos usuarios, por lo que la implementación de una consulta `prefers-reduced-motion` es una consideración recomendada para la accesibilidad.
Además, debido a que las animaciones impulsadas por el desplazamiento aún no son compatibles universalmente en todos los navegadores, el autor emplea consultas `@supports` para asegurar que la galería siga siendo accesible. En los navegadores no compatibles, las columnas simplemente se desplazarán a una velocidad estándar y uniforme, manteniendo la funcionalidad principal de la galería.