Bramus membagikan kegembiraannya terhadap Animasi Scroll-Linked yang hanya didukung oleh HTML dan CSS. Opsi JavaScript yang terintegrasi dengan WAAPI juga disertakan.
Segmen:
- 00.00 - Prolog
- 00:15 - Contoh Pengantar + Teaser
- 03:41 - Animasi Tertaut Scroll vs. Dipicu Scroll
- 05:18 - Contoh Dasar penggunaan CSS (Linimasa Dokumen, Linimasa Progres Scroll, scroll(), animasi-timeline)
- 12:31 - Contoh Dasar menggunakan JavaScript (ScrollTimeline)
- 14:06 - Linimasa Progres Scroll Bernama (nama-timeline-scroll, sumbu-linimasa-scroll)
- 20:31 - Offset Linimasa Progres Scroll
- 25:05 - Elemen Pelacakan saat masuk/keluar menggunakan JavaScript (ViewTimeline)
- 31:09 - Elemen Pelacakan saat masuk/keluar menggunakan CSS (view-timeline-name, view-timeline-axis)
- 32:02 - Inset Linimasa Progres Tampilan
- 33:07 - Lihat Contoh Linimasa Progres (Alur Cover, Daftar Kontak Fly-in/Fly-Out, Stacking Card)
- 35:40 - Mainkan sekarang!
- 38.04 - Epilog
Referensi:
- Demo Alur Cover (CSS) → https://goo.gle/3SvEQbd
- Demo Alur Sampul (JS+WAAPI) → https://goo.gle/3F9S62h
- Demo Progres Scroll (CSS) → https://goo.gle/3F9S6zj
- Demo Progres Scroll (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Pengungkapan Gambar saat Masuk ke Demo (CSS) → https://goo.gle/3F9S8XX
- Pengungkapan Gambar saat Masuk ke Demo (JS+WAAPI) → https://goo.gle/3Sto8JK
- Mencantumkan Demo Efek fly-in + fly-out (CSS) →https://goo.gle/3Svg3UE
- Mencantumkan Demo Efek fly-in + fly-out (JS+WAAPI) → https://goo.gle/3F9Saix
- Demo Bagian Scroll Horizontal (CSS) → https://goo.gle/3SpaDe5
- Demo Bagian Scroll Horizontal (JS+WAAPI) → https://goo.gle/3SAbcBz
- Cover Paralaks untuk Sticky Header, dipalsukan (JS+WAAPI) → https://goo.gle/3SKoMCR
Demo Menumpuk Kartu (JS+WAAPI) → https://goo.gle/3VW0wjD
Koleksi dengan semua Demo CSS → https://goo.gle/3F9ScqF
Koleksi dengan semua Demo JS+WAAPI → https://goo.gle/3F9ScXH
Spesifikasi Animasi dengan Scroll-Linked → https://goo.gle/3F9SduJ
Polyfill Animasi dengan Scroll-Linked → https://goo.gle/3SyziN8
Masalah CSS WG “Bring back Scroll-Offsets”→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Video lainnya dalam seri HTTP 203 → http://goo.gle/HTTP203
Berlangganan Developer Google Chrome di sini → https://goo.gle/ChromeDevs
Selain itu, jika suka, Anda mungkin akan suka podcast HTTP203 → https://goo.gle/HTTP203Podcast