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" (Libérez la puissance des animations liées au défilement), une formation vidéo en 10 parties pour tout savoir sur les animations liées au 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 ?

Grâce aux animations liées au défilement, vous pouvez prendre une animation CSS ou WAAPI existante et l'animer lors du défilement. Par conséquent, les animations liées au défilement héritent de tous les avantages de ces API. Cela inclut les animations liées au défilement accélérées par le matériel qui ne sont pas sujettes aux à-coups lorsque le thread principal est bloqué.

Les animations liées au défilement sont disponibles dans Chrome à partir de la version 115 et sont le candidat idéal pour l'amélioration progressive.

Browser Support

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

Source

Regardez la série de vidéos ou lisez la documentation pour en savoir plus sur les animations liées au défilement.

Les épisodes

La formation se compose de 10 épisodes et est divisée en deux grandes parties : une explication des concepts fondamentaux qui composent les animations liées au défilement, suivie de quelques applications pratiques.

  1. Épisode 1 : Introduction.
  2. Épisode 2 : Concepts fondamentaux : scroll() et ScrollTimeline.
  3. Épisode 3 : Concepts fondamentaux : view() et ViewTimeline.
  4. Épisode 4 : Concepts fondamentaux : démystification des plages de la timeline.
  5. Épisode 5 : Concepts fondamentaux : 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 lors du défilement.
  9. Épisode 9 : Application pratique : détection de la vitesse de défilement.
  10. Épisode 10 : Conclusion.

Il est préférable de regarder les épisodes dans l'ordre, car ils s'appuient sur des démonstrations et des 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 liés dans la description.

Autres ressources