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

Bramus

Nos enorgullece anunciar el lanzamiento de "Un modifique el poder de las animaciones basadas en desplazamientos", un curso en video de 10 partes para aprender todo sobre las animaciones basadas en desplazamientos a través de CSS o JavaScript.

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

¿Animaciones basadas en desplazamientos?

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

Las animaciones basadas en desplazamientos están disponibles en Chrome a partir de la versión 115 de Chrome y son la candidata perfecta para la mejora progresiva.

Navegadores compatibles

  • 115
  • 115
  • x

Origen

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 grandes: una explicación de los conceptos básicos que componen las animaciones basadas en desplazamientos, seguida de algunas aplicaciones prácticas.

  1. Episodio 1: Introducción.
  2. Episodio 2: Conceptos principales: scroll() y ScrollTimeline.
  3. Episodio 3: Conceptos principales: view() y ViewTimeline.
  4. Episodio 4: Conceptos principales: Desmitificación de los intervalos del cronograma.
  5. Episodio 5: Conceptos principales: Búsqueda del cronograma y Cronogramas con nombre.
  6. Episodio 6: Aplicación práctica: Cómo agregar sombras de desplazamiento a un contenedor de desplazamientos.
  7. Episodio 7: Aplicación práctica: animación de elementos en diferentes direcciones.
  8. Episodio 8: Aplicación práctica: animación de modelos 3D y más en desplazamiento.
  9. Episodio 9: Aplicación práctica: Detección de la velocidad del desplazamiento.
  10. Episodio 10: Final.

Los episodios se ven mejor en orden, ya que se basan en las demostraciones y técnicas que abordamos en episodios anteriores. Las demostraciones y herramientas que se muestran en cada episodio están disponibles en línea y tienen vínculos en la descripción.

Más recursos