Bramus teilt seine Begeisterung für Scroll-Linked Animationen, die ausschließlich auf HTML und CSS basieren. Eine JavaScript-Option, die in WAAPI integriert werden kann, ist ebenfalls enthalten.
Kapitel:
- 00:00 – Prolog
- 00:15 – Intro + Teaser-Beispiel
- 03:41 – durch Scrollen verknüpfte und durch Scrollen ausgelöste Animationen
- 05:18 – Einfaches Beispiel mit CSS (Dokumentzeitleiste, Zeitleiste für Scrollfortschritt, scroll(), Animationszeitachse)
- 12:31 – Einfaches Beispiel mit JavaScript (ScrollTimeline)
- 14:06 – Benannte Zeitleisten für den Scroll-Fortschritt (Name der Scroll-Zeitachse, Scroll-Zeitachse-Achse)
- 20:31 – Offsets der Zeitachse beim Scrollen
- 25:05 – Tracking-Elemente beim Ein- und Beenden mithilfe von JavaScript (ViewTimeline)
- 31:09 – Tracking-Elemente beim Ein- und Beenden mithilfe von CSS (view-timeline-name, view-timeline-axis)
- 32:02 – Fortschritts-Zeitachseneinfügungen ansehen
- 33:07 – Beispiele für den Fortschritts-Zeitplan ansehen (Cover-Flow, Ein-/Ausblenden der Kontaktliste, Karten stapeln)
- 35:40 – Spiel noch heute mit ihm!
- 38:04 – Epilog
Ressourcen:
- Cover Flow-Demo (CSS) → https://goo.gle/3SvEQbd
- Demo zum Cover Flow (JS + WAAPI) → https://goo.gle/3F9S62h
- Demo zum Scrollfortschritt (CSS) → https://goo.gle/3F9S6zj
- Demo zum Scrollfortschritt (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Demo „Image Reveal on Enter“ (CSS) → https://goo.gle/3F9S8XX
- Demo „Image Reveal on Enter“ (JS+WAAPI) → https://goo.gle/3Sto8JK
- Liste der Einflieger- und Fly-out-Effekt-Demo (CSS) → https://goo.gle/3Svg3UE
- Demo des Ein- und Ausblendeffekts (JS + WAAPI) auflisten → https://goo.gle/3F9Saix
- Demo des horizontalen Scrollbereichs (CSS) → https://goo.gle/3SpaDe5
- Demo des horizontalen Scrollbereichs (JS+WAAPI) → https://goo.gle/3SAbcBz
- Parallel Cover to Sticky Header, faked (JS+WAAPI) → https://goo.gle/3SKoMCR
Stacking Cards Demo (JS+WAAPI) → https://goo.gle/3VW0wjD
Sammlung mit allen CSS-Demos → https://goo.gle/3F9ScqF
Sammlung mit allen JS+WAAPI-Demos → https://goo.gle/3F9ScXH
Scroll-Linked Animations Specification → https://goo.gle/3F9SduJ
Scroll-Linked Animations Polyfill → https://goo.gle/3SyziN8
CSS WG Issue „Bring back Scroll-Offsets“ → https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Mehr Videos aus der Reihe „HTTP 203“ → http://goo.gle/HTTP203
Abonniere die Google Chrome-Entwickler hier → https://goo.gle/ChromeDevs
Wenn Ihnen dieser Podcast gefallen hat, könnte Ihnen auch der Podcast HTTP203 gefallen → https://goo.gle/HTTP203Podcast