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 qui présente 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 ?

Avec les animations liées au défilement, vous pouvez utiliser une animation CSS ou WAAPI existante et l'animer lorsque vous faites défiler la page. C'est pourquoi 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 avec accélération matérielle 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 Chrome 115 et sont idéales pour une amélioration progressive.

Navigateurs pris en charge

  • 115
  • 115
  • x

Source

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

Épisodes

Le cours se compose de 10 épisodes et se divise en deux grandes parties: une explication des concepts fondamentaux qui constituent des animations liées au défilement, puis quelques applications pratiques.

  1. Épisode 1: Présentation.
  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 chronologie
  5. Épisode 5: Concepts fondamentaux: recherche de la chronologie et chronologie nommée
  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: Animez des modèles 3D et plus encore sur Scroll.
  9. Épisode 9: Application pratique: détection de la vitesse de défilement.
  10. Épisode 10: Conclusion

Les épisodes sont mieux classés dans l'ordre, car ils s'appuient sur les démonstrations et les techniques abordées dans les épisodes précédents. Les démos et les outils présentés dans chaque épisode sont disponibles en ligne et accessibles via un lien dans la description.

Autres ressources