Scroll-Linked Animation

Una animación se reproduce una vez cuando un elemento entra o sale del viewport.

Añade una "Scroll-Triggered Animation" (también llamada reveal on scroll o animate on scroll) en [dónde].
Cada elemento debe aparecer con un fundido y subir a su sitio una sola vez al entrar en pantalla, a su propio ritmo rápido y suave en lugar de seguir la posición del scroll.
Mantén el contenido visible si los scripts no cargan y muestra los elementos de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las capas se mueven a distintas velocidades respecto al scroll para crear sensación de profundidad.

Añade un efecto de scroll "Parallax" (también llamado parallax scrolling o parallax layers) en [dónde].
Las capas de fondo deben moverse más despacio que el contenido al hacer scroll, y la más lejana, menos que ninguna, para dar una sutil sensación de profundidad.
Mantenlo ligado a la posición del scroll sin retraso, deja el texto en la capa de velocidad normal, y desactiva el efecto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento o una escena se amplía o se reduce a medida que el usuario hace scroll.

Añade un efecto "Zoom on Scroll" (también llamado scroll zoom o scale on scroll) en [dónde].
Mientras la sección se mantiene en pantalla, el elemento debe crecer suavemente desde una tarjeta pequeña hasta llenar toda la vista, al ritmo del scroll, y encogerse de nuevo al subir.
Escálalo sin desplazar el diseño que lo rodea y muéstralo en su tamaño final sin zoom si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las palabras de un párrafo pasan de atenuadas a opacidad total a medida que el usuario hace scroll.

Añade un efecto "Text Reveal" (también llamado scroll text reveal o word-by-word reveal) en [dónde].
El párrafo debe empezar atenuado y, a medida que el usuario hace scroll, cada palabra debe iluminarse del todo una tras otra, vinculada a la posición del scroll.
Al volver a subir, las palabras deben atenuarse de nuevo, y el párrafo completo debe seguir disponible para los lectores de pantalla sea cual sea su atenuación.

El scroll y los saltos a anclas se deslizan con suavizado en lugar de moverse de golpe.

Añade un scroll suave (Smooth Scroll, también llamado smooth scrolling o inertia scroll) en [dónde].
El scroll y los saltos a anclas deben deslizarse y frenar suavemente en lugar de moverse a saltos, con una sensación ligera y ágil, no con un retraso pesado.
Mantén el comportamiento nativo, como el scroll con teclado, la barra de desplazamiento y la búsqueda en la página, y desactiva el suavizado si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las tarjetas se quedan fijas arriba al hacer scroll y se apilan unas sobre otras, a menudo encogiendo las anteriores.

Añade "Stacking Cards" (también llamadas sticky stacking cards o card stack scroll) en [dónde].
Al hacer scroll, cada tarjeta debe quedarse fija cerca de la parte superior y la siguiente debe subir por encima, mientras las de debajo se encogen un poco para formar una pila ordenada.
Deja visible un borde fino de cada tarjeta anterior y da a la última espacio suficiente para llegar a su sitio antes de que termine la sección.