Bramus partage son enthousiasme pour les animations liées au défilement, qui ne reposent que sur HTML et CSS. Une option JavaScript qui s'intègre à WAAPI est également incluse.
Chapitres:
- 00:00 – Prologue
- 00:15 – Introduction + Exemple d'accroche
- 03:41 – Animations liées au défilement ou animations à déclenchement par défilement
- 05:18 – Exemple de base avec CSS (Timeline du document, timeline de progression de défilement, Scroll(), animation-timeline)
- 12:31 – Exemple de base avec JavaScript (ScrollTimeline)
- 14:06 – Timelines de progression de défilement nommées (scroll-timeline-name, scroll-timeline-axis)
- 20:31 – Décalages de la timeline de progression de défilement
- 25:05 – Suivi des éléments à l'entrée et à la sortie à l'aide de JavaScript (ViewTimeline)
- 31:09 – Suivi des éléments à l'entrée et à la sortie à l'aide de code CSS (view-timeline-name, view-timeline-axis)
- 32:02 – Encarts de timeline de progression d'affichage
- 33:07 – Exemples de chronologie de progression d'affichage (flux de la couverture, survol/sortie d'une liste de contacts, empilement de cartes)
- 35:40 – Jouez avec !
- 38:04 – Épilogue
Resources:
- Démonstration du flux de couverture (CSS) → https://goo.gle/3SvEQbd
- Démonstration du flux de couverture (JS+WAAPI) → https://goo.gle/3F9S62h
- Démo de la progression de défilement (CSS) → https://goo.gle/3F9S6zj
- Démo de la progression de défilement (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Affichage de l'image dans la démo d'entrée (CSS) → https://goo.gle/3F9S8XX
- Affichage de l'image dans la démo d'entrée (JS+WAAPI) → https://goo.gle/3Sto8JK
- Présenter la démonstration des effets de survol (CSS) → https://goo.gle/3Svg3UE
- Répertorier la démonstration des effets de survol et de sortie (JS+WAAPI) → https://goo.gle/3F9Saix
- Démonstration de la section de défilement horizontal (CSS) → https://goo.gle/3SpaDe5
- Démonstration de la section de défilement horizontal (JS+WAAPI) → https://goo.gle/3SAbcBz
- Couverture parallaxe pour en-tête persistant (JS+WAAPI) → https://goo.gle/3SKoMCR
Démonstration des cartes empilées (JS+WAAPI) → https://goo.gle/3VW0wjD
Collection avec toutes les démos CSS → https://goo.gle/3F9ScqF
Collection avec toutes les démonstrations JS+WAAPI → https://goo.gle/3F9ScXH
Spécification des animations liées au défilement → https://goo.gle/3F9SduJ
Animations par défilement Polyfill → https://goo.gle/3SyziN8
Problème lié au WG du CSS "Bring back Scroll-Offsets" → https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
D'autres vidéos de la série HTTP 203 → http://goo.gle/HTTP203
Abonnez-vous aux développeurs Google Chrome ici → https://goo.gle/ChromeDevs
Si cela vous a plu, vous pourriez également être intéressé par le podcast HTTP203 → https://goo.gle/HTTP203Podcast