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 desplazamientos con CSS o JavaScript.

Puedes ver la serie en YouTube. El primer episodio está incorporado aquí.

¿Qué son las animaciones basadas en desplazamientos?

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

Las animaciones basadas en desplazamientos están disponibles en Chrome a partir de Chrome 115 y son el candidato perfecto para la mejora progresiva.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

Mira la serie de videos o lee la documentación para obtener más información sobre las animaciones basadas en desplazamientos.

Los episodios

El curso consta de 10 episodios y se divide en dos partes principales: una explicación de los conceptos centrales que componen las animaciones basadas en desplazamientos, seguida de algunas aplicaciones prácticas.

  1. Episodio 1: Introducción.
  2. Episodio 2: Conceptos centrales: scroll() y ScrollTimeline.
  3. Episodio 3: Conceptos centrales: view() y ViewTimeline.
  4. Episodio 4: Conceptos centrales: Rangos de cronograma desmitificados.
  5. Episodio 5: Conceptos centrales: Búsqueda de cronograma y cronogramas 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 más con el desplazamiento.
  9. Episodio 9: Aplicación práctica: Detección de velocidad de desplazamiento.
  10. Episodio 10: Cierre.

Es mejor ver los episodios en orden, ya que se basan en las demostraciones y las técnicas que se cubrieron en episodios anteriores. Las demostraciones y las herramientas que se muestran en cada episodio están disponibles en línea y vinculadas en la descripción.

Más recursos