Parallax

El progreso de la animación está ligado directamente a la posición del scroll, así que al avanzar o retroceder se reproduce o se rebobina.

Añade una "Scroll-Linked Animation" (también llamada scroll-driven animation o scroll scrub) en [dónde].
La animación debe moverse exactamente con la posición del scroll: al bajar avanza y al subir se rebobina al instante, sin un suavizado temporal propio.
Asigna toda la animación a un tramo de scroll claro y muestra un estado estático razonable 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).

Una imagen fija hace zoom y se desplaza lentamente dentro de su marco.

Añade un "Ken Burns Effect" (también llamado slow pan and zoom) en [dónde].
Mientras se muestra cada imagen, debe hacer zoom y desplazarse muy despacio en una sola dirección, y luego fundirse con la siguiente imagen, que se mueve en otra dirección: tranquilo y continuo.
Haz que cada imagen cubra todo su marco en todo momento para que nunca se vea un borde, y deja las imágenes quietas 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.

Una barra o un anillo se va llenando a medida que el usuario se desplaza por la página o el artículo.

Añade una barra de progreso de lectura (Scroll Progress Indicator, también llamada reading progress bar) en [dónde].
Una barra fina en la parte superior debe llenarse de izquierda a derecha según lo que el lector haya avanzado, hasta ocupar todo el ancho al final.
Vincúlala directamente a la posición del scroll, sin retraso de suavizado, y evita que tape el contenido.

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.