Découvrez "Exploiter tout le potentiel des animations basées sur le défilement"

Bramus

Nous sommes fiers d'annoncer la sortie de "Unleash the Power of Scroll-Driven Animations", un cours vidéo en 10 parties pour tout savoir sur les animations déclenchées par le défilement à l'aide de CSS ou de JavaScript.

Vous pouvez regarder la série sur YouTube. Le premier épisode est intégré ici.

Animations liées au défilement ?

Les animations liées au défilement vous permettent de prendre une animation CSS ou WAAPI existante et de l'animer au défilement. Par conséquent, les animations basées sur le défilement héritent de tous les avantages de ces API. Cela inclut les animations pilotées par le défilement accélérées par le matériel, qui ne sont pas sujettes aux saccades lorsque le thread principal est bloqué.

Les animations basées sur le défilement sont disponibles dans Chrome à partir de la version 115 et sont idéales pour l'amélioration progressive.

Browser Support

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

Source

Pour en savoir plus sur les animations déclenchées par le défilement, regardez la série de vidéos ou consultez la documentation.

Les épisodes

Le cours se compose de 10 épisodes et se divise en deux grandes parties : une explication des concepts de base qui composent les animations pilotées par le défilement, suivie de quelques applications pratiques.

  1. Épisode 1 : Introduction.
  2. Épisode 2 : Concepts de base : scroll() et ScrollTimeline
  3. Épisode 3 : Concepts de base : view() et ViewTimeline
  4. Épisode 4 : Concepts de base : démystifier les plages de la timeline.
  5. Épisode 5 : Concepts de base : recherche dans la timeline et timelines nommées.
  6. Épisode 6 : Application pratique : ajouter des ombres de défilement à un conteneur de défilement.
  7. Épisode 7 : Application pratique : animer des éléments dans différentes directions.
  8. Épisode 8 : Application pratique : animer des modèles 3D et plus encore au défilement.
  9. Épisode 9 : Application pratique : détection de la vitesse de défilement.
  10. Épisode 10 : Outro.

Il est préférable de regarder les épisodes dans l'ordre, car ils s'appuient sur les démonstrations et les techniques abordées dans les épisodes précédents. Les démonstrations et les outils présentés dans chaque épisode sont disponibles en ligne et sont indiqués dans la description.

Autres ressources