El desplazamiento parallax, ese efecto visual en el que los elementos se mueven a distinta velocidad al hacer scroll, lleva años formando parte del diseño web. La receta tradicional exigía JavaScript: un listener del evento scroll, recálculos de posición en cada frame y ajustes manuales del elemento. Hoy es posible conseguir el mismo resultado con CSS puro gracias a las timelines de animaciones ligadas al scroll (CSS Scroll-driven animation timelines).
La técnica propuesta se condensa en una clase utility llamada .parallax. Su núcleo está en la propiedad view-timeline-name, que crea una timeline de progreso de visualización: mide desde el momento en que el elemento entra en el viewport (0%) hasta que sale por completo (100%). Con view-timeline-axis: block, la timeline sigue el eje vertical, el habitual en los modos de escritura horizontales.
Dentro del contenedor, la propiedad animation-timeline: --parallax-tl sustituye el reloj temporal de la animación por esa timeline. A partir de ahí, el resto se encadena: animation: parallax auto linear both para que la duración la marque la timeline, no los segundos; linear para que el progreso de scroll mapee directamente al movimiento; y both para mantener los fotogramas inicial y final fuera del rango activo.
Los keyframes hacen el trabajo visible: el hijo se desplaza de translate: 0 -20% a translate: 0 20% según se hace scroll sobre el contenedor, creando sensación de profundidad al moverse a un ritmo distinto al de su entorno. Para evitar que aparezca una franja vacía al desplazar al hijo (mismo tamaño que el contenedor), se escala con scale: calc(1 + var(--parallax-offset, 20) * 2 / 100). Con el offset por defecto de 20, el hijo se renderiza al 140% de su tamaño y el excedente lo recorta overflow: hidden. Como translate y scale leen la misma variable CSS, basta con ajustar --parallax-offset para intensificar el efecto sin huecos.
El bloque añade además will-change: translate para que el navegador promocione el elemento a su propia capa con antelación, y una regla @media (prefers-reduced-motion: reduce) que desactiva la animación y el escalado para usuarios que prefieren reducir el movimiento, una práctica recomendada de accesibilidad.