jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de animaciones de desplazamiento

Genera animaciones CSS de desplazamiento con animation-timeline.

Cargando herramienta...

Qué es Generador de animaciones de desplazamiento?

Las animaciones impulsadas por desplazamiento usan la posicion de desplazamiento o la posicion en el viewport de un elemento como la linea de tiempo de la animacion en lugar del tiempo. La funcion scroll() rastrea la posicion del contenedor de desplazamiento, y view() rastrea la posicion de un elemento en el viewport. Esto permite barras de progreso de lectura, efectos de revelacion y animaciones vinculadas al desplazamiento con CSS puro.

Respuesta rápida

Las animaciones impulsadas por desplazamiento permiten vincular el progreso de una animacion directamente a la posicion de desplazamiento de un contenedor, eliminando la necesidad de event listeners de scroll y bibliotecas de paralaje basadas en JavaScript.

Last updated: 2026-05-25

Limitaciones

  • Chrome 115+ y Edge 115+ admiten animaciones impulsadas por desplazamiento. Firefox y Safari aun no admiten la API ScrollTimeline.
  • Las animaciones impulsadas por desplazamiento usan la API Web Animations. Los @keyframes CSS siguen siendo necesarios para definir los estados de la animacion.
  • El progreso de scroll() y view() esta determinado por la distancia de desplazamiento. Las animaciones pueden comportarse de manera diferente en contenido muy corto o muy largo.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el tipo de linea de tiempo: scroll (rastrea el contenedor de desplazamiento) o view (rastrea la posicion del elemento en el viewport).
  2. Establezca el rango de la animacion y los keyframes para el efecto deseado.
  3. La herramienta genera el CSS para el elemento animado.
  4. Copie el CSS y pruebe en una pagina desplazable para verificar la animacion.

Para qué puedes usarla

  • Crear una barra de progreso de lectura en la parte superior de una entrada de blog.
  • Construir efectos de revelacion por aparicion o deslizamiento al desplazarse.
  • Agregar un efecto de paralaje o animacion de fondo vinculada al desplazamiento.

Casos de uso

Ejemplos prácticos

Ejemplo

Barra de progreso de lectura de blog

Una entrada de blog muestra una barra de progreso horizontal que se llena a medida que el lector se desplaza, usando animation-timeline: scroll() en el contenedor del articulo.

Ejemplo

Revelacion de secciones activada por desplazamiento

Las secciones aparecen gradualmente al entrar en el viewport usando animation-timeline: view() con un rango personalizado que comienza en 0% y termina en 50% de la visibilidad del elemento.

Errores comunes

  • Crear animaciones que se activan con demasiada frecuencia y perjudican el rendimiento del desplazamiento.
  • No probar en dispositivos moviles donde el comportamiento de desplazamiento difiere del escritorio.
  • Usar animaciones impulsadas por desplazamiento para contenido critico sin un fallback estatico.

Verificación

  1. Pruebe la animacion en Chrome y verifique que el elemento se anime suavemente a medida que la pagina se desplaza.
  2. Revise la animacion en Firefox y Safari para confirmar que degrade gracefulmente sin romper el diseno ni la funcionalidad de la pagina.

FAQ

Preguntas sobre Generador de animaciones de desplazamiento

Que navegadores admiten animaciones impulsadas por desplazamiento?

Chrome 115+, Edge 115+. Safari y Firefox estan desarrollando soporte. Proporcione un fallback estatico.

Cual es la diferencia entre scroll() y view()?

Scroll() rastrea la posicion de desplazamiento de un contenedor. View() rastrea la posicion del elemento en relacion con el viewport.

Puedo usar animaciones impulsadas por desplazamiento con keyframes CSS regulares?

Si. Defina @keyframes estandar como lo haria normalmente, luego adjuntelos a una linea de tiempo de desplazamiento con animation-timeline: scroll() o animation-timeline: view(). Los porcentajes de keyframes se asignan al progreso de desplazamiento: 0% es el inicio del rango y 100% es el final. No se requiere JavaScript.

Que impacto en el rendimiento tienen las animaciones impulsadas por desplazamiento?

Las animaciones impulsadas por desplazamiento se ejecutan en el hilo del compositor, no en el hilo principal de JavaScript. Esto significa que funcionan sin problemas a 60 fps sin causar tirones, incluso durante trabajo intensivo en el hilo principal. Sin embargo, animar propiedades que activan diseno o pintura aun causara repintados, por lo que es mejor limitarse a transform y opacity.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también