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

Bramus

Nous sommes fiers de vous annoncer la sortie de Découvrez tout le potentiel des animations basées sur le défilement, un cours vidéo en 10 parties qui vous explique tout sur les animations basées sur 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 basées sur le défilement accélérées par le matériel qui ne sont pas sujettes à des à-coups 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: not supported.

Source

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

Les épisodes

Ce cours de 10 épisodes se divise en deux grandes parties: une explication des concepts fondamentaux qui constituent les animations basées sur 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 chronologie
  5. Épisode 5: Concepts de base: recherche dans la chronologie et chronologies 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 lors du 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