Presentamos "Libera el poder de las animaciones basadas en desplazamientos"

Bramus

Nos complace anunciar el lanzamiento de "Unleash the Power of Scroll-Driven Animations", un curso de video de 10 partes para aprender todo sobre las animaciones basadas en el desplazamiento con CSS o JavaScript.

Puedes mirar la serie en YouTube. Aquí se incorporó el primer episodio.

¿Qué son las animaciones basadas en el desplazamiento?

Con las animaciones basadas en desplazamientos, puedes tomar una animación existente de CSS o WAAPI y animarla durante el desplazamiento. Por eso, las animaciones controladas por desplazamiento heredan todos los beneficios que aportan estas APIs. Esto incluye animaciones controladas por desplazamiento aceleradas por hardware que no están sujetas a tirones cuando se bloquea el subproceso principal.

Las animaciones controladas por desplazamiento están disponibles en Chrome a partir de la versión 115 y son ideales para la mejora progresiva.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Mira la serie de videos o lee la documentación para obtener más información sobre las animaciones controladas por desplazamiento.

Los episodios

El curso consta de 10 episodios y se divide en dos partes principales: una explicación de los conceptos básicos que componen las animaciones controladas por desplazamiento y algunas aplicaciones prácticas.

  1. Episodio 1: Introducción.
  2. Episodio 2: Conceptos básicos: scroll() y ScrollTimeline.
  3. Episodio 3: Conceptos básicos: view() y ViewTimeline.
  4. Episodio 4: Conceptos básicos: Desmitificación de los intervalos del cronograma.
  5. Episodio 5: Conceptos básicos: Búsqueda en la línea de tiempo y líneas de tiempo con nombre.
  6. Episodio 6: Aplicación práctica: Agrega sombras de desplazamiento a un contenedor de desplazamiento.
  7. Episodio 7: Aplicación práctica: Anima elementos en diferentes direcciones.
  8. Episodio 8: Aplicación práctica: Anima modelos 3D y mucho más con el desplazamiento.
  9. Episodio 9: Aplicación práctica: Detección de la velocidad de desplazamiento.
  10. Episodio 10: Cierre.

Se recomienda mirar los episodios en orden, ya que se basan en las demostraciones y las técnicas que se explican en los episodios anteriores. Las demostraciones y las herramientas que se muestran en cada episodio están disponibles en línea y se vinculan en la descripción.

Más recursos