Stacking Cards

Las tarjetas se apilan con pequeños desplazamientos y la de arriba se aparta para mostrar la siguiente.

Añade un "Card Stack" (también llamado stacked cards) en [dónde].
Apila las tarjetas con pequeños desplazamientos una detrás de otra; cada pulsación debe apartar la tarjeta de arriba hacia un lado y colocarla al fondo mientras las demás avanzan: suave, con una sensación ligera y rápida.
Haz que funcione con el teclado, deja que los lectores de pantalla lleguen a cada tarjeta en orden y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un elemento se queda fijo en su sitio durante un tramo del scroll mientras el resto del contenido o la animación avanza.

Añade un efecto de scroll "Pinning" (también llamado pinned section o sticky section) en [dónde].
Un panel debe quedarse fijo en su sitio mientras el contenido de al lado pasa con el scroll, cambiando según el paso que se está leyendo, y debe soltarse cuando termine la sección.
Prefiere el posicionamiento sticky nativo en lugar de secuestrar el scroll, y asegúrate de que cada paso se lea bien sin el panel fijo en pantallas pequeñas.

El desplazamiento se detiene en puntos de ajuste definidos, como diapositivas o secciones.

Añade "Scroll Snap" (también llamado scroll snapping o snap scrolling) en [dónde].
Cuando el scroll se detenga, la vista debe asentarse limpiamente en la sección más cercana para que cada una quede alineada con el borde en lugar de pararse a medias.
Usa el ajuste nativo del navegador para que el scroll con rueda, táctil y teclado siga funcionando, y asegúrate de que el contenido más alto que la pantalla se pueda leer entero.

Un encabezado fijo reduce su altura o tamaño cuando el usuario baja por la página.

Añade un "Sticky Header Shrink" (también llamado shrinking header o shrink on scroll) en [dónde].
El encabezado debe quedarse arriba y, en cuanto el lector baje un poco, encogerse suavemente hasta una barra más delgada con un logo más pequeño, y volver a crecer al regresar arriba del todo.
Evita que el contenido de abajo salte mientras el encabezado cambia de tamaño.

Grandes líneas de texto se deslizan en horizontal mientras la página se desplaza en vertical.

Añade un "Text Marquee on Scroll" (también llamado scroll text marquee o scroll velocity text) en [dónde].
Grandes líneas de texto deben deslizarse de lado al bajar por la página, con filas alternas moviéndose en direcciones opuestas, y volver atrás al subir.
Vincula el movimiento a la posición del scroll, evita que las líneas largas creen una barra de desplazamiento horizontal y mantenlas quietas 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).