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

Bramus

Nos complace anunciar el lanzamiento de "Desata el poder de las animaciones basadas en el desplazamiento", 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. El primer episodio está incorporado aquí.

¿Animaciones basadas en el desplazamiento?

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

Las animaciones impulsadas por el desplazamiento están disponibles en Chrome a partir de la versión 115 y son la opción ideal para la mejora progresiva.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

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

Los episodios

El curso consta de 10 episodios y se divide en dos grandes partes: una explicación de los conceptos básicos que conforman las animaciones impulsadas por el desplazamiento, seguidas de 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 rangos de cronograma.
  5. Episodio 5: Conceptos básicos: Búsqueda de cronogramas 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 mucho más durante el desplazamiento.
  9. Episodio 9: Aplicación práctica: Detección de velocidad de desplazamiento.
  10. Episodio 10: Outro.

Los episodios se ven mejor en orden, ya que se basan en demostraciones y técnicas que se abordaron 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