Aparición al hacer scroll, una barra de progreso de lectura, parallax y una historia fija, cada uno construido de tres formas: animaciones CSS vinculadas al scroll, IntersectionObserver y GSAP ScrollTrigger.
Las animaciones al hacer scroll reproducen efectos cuando el contenido entra en pantalla o mientras la página se desplaza. El CSS moderno vincula los keyframes al scroll con animation-timeline: view() o scroll(), sin script donde hay soporte. IntersectionObserver en JavaScript activa clases de aparición en todas partes, y GSAP ScrollTrigger se encarga de fijar secciones y de las líneas de tiempo controladas por el scroll. Respeta siempre prefers-reduced-motion.
Elige un enfoque
Los cuatro efectos que más se piden, aparición al hacer scroll, barra de progreso de lectura, parallax e historia fija, se muestran en CSS puro, en JavaScript simple con IntersectionObserver y en GSAP ScrollTrigger. Las versiones CSS se ejecutan en vivo en marcos con scroll, y la versión con observer funciona como demo real en esta misma página.
Vincula el progreso de una animación al scroll en lugar de al tiempo. scroll() sigue cuánto se ha desplazado un contenedor con scroll, de arriba abajo. view() sigue el recorrido de un elemento por el área visible, así que los keyframes se ejecutan cuando entra y sale.
Chrome y Edge desde la versión 115, y Safari desde la versión 26. Firefox ha tenido la función tras una preferencia en lugar de activada por defecto, así que consulta caniuse antes de depender de ella y ofrece siempre una alternativa.
Para saber cuándo un elemento entra o sale de la vista, sí. El navegador calcula las intersecciones de forma asíncrona y solo te avisa cuando hay cambios, mientras que un listener de scroll se ejecuta muchas veces por segundo y te tienta a leer el layout, lo que provoca tirones.
No para apariciones sencillas ni para una barra de progreso. GSAP ScrollTrigger se gana su sitio con secciones fijadas, líneas de tiempo de varios pasos controladas por el scroll, ajuste a puntos y efectos que deben comportarse igual en todos los navegadores hoy.
Dentro de una media query prefers-reduced-motion: reduce, muestra el contenido en su estado final y elimina el parallax y los movimientos amplios. En JavaScript, comprueba la misma consulta con window.matchMedia antes de crear animaciones. Los fundidos suaves de opacidad suelen ser aceptables.
Cada marco tiene su propio scroll. En un navegador sin animation-timeline, la guarda @supports deja todo visible y quieto.
Cada tarjeta aparece y sube al entrar en el viewport. animation-range limita el efecto a la fase de entrada.
scroll(root) sigue el scroll del documento. La barra se escala de 0 al ancho completo sin ningún listener.
La capa interior se mueve más despacio que la página mientras su caja cruza el viewport. Se desactiva con movimiento reducido.
La imagen se queda fijada con position: sticky mientras cada paso se ilumina al cruzar el centro del marco.
La demo en vivo cerca del inicio de esta página ejecuta este mismo patrón en React. Estas versiones funcionan con cualquier framework o sin ninguno.
Las tarjetas empiezan ocultas solo cuando el script se ha ejecutado, añadiendo primero una clase a html, así que si el script falla siguen visibles.
El progreso necesita la posición exacta del scroll, así que este usa un listener de scroll pasivo limitado a un fotograma.
Una fina franja de observación en el centro de la pantalla marca como activo el paso que la está cruzando.
Solo código. ScrollTrigger es un plugin de GSAP; ambos son de uso gratuito bajo la propia licencia de GSAP, que deberías leer antes de publicar.
gsap.matchMedia ejecuta la configuración solo cuando el lector no ha pedido movimiento reducido, y la revierte si el ajuste cambia.
Desplázate dentro de la caja. Las tarjetas aparecen una vez, la barra sigue el progreso, la capa a rayas se mueve más despacio que el contenido y el panel fijado sigue al paso que cruza el centro.
El movimiento reducido está activado, así que las tarjetas aparecen sin movimiento y el parallax está desactivado.
Progreso del scroll en la demo
Área de demo con scroll
Empieza a desplazarte.
Capa parallax
Empieza gratis · Sin tarjeta de crédito