Bramus dzieli się swoją pasją do funkcji Scroll-Linked Animations, które bazują wyłącznie na HTML i CSS. Dostępna jest też opcja JavaScript, która integruje się z WAAPI.
Rozdziały:
- 00:00 – Prolog
- 00:15 – Wstęp + przykład zwiastuna
- 03:41 – Animacje uruchamiane przewijaniem i przewijanie
- 05:18 – Podstawowy przykład z użyciem CSS (Oś czasu dokumentu, Oś czasu postępu przewijania, Scroll(), oś czasu animacji)
- 12:31 – Podstawowy przykład z użyciem JavaScriptu (ScrollTimeline)
- 14:06 – z nazwami osi czasu postępu przewijania (nazwa osi czasu przewijania, oś czasu przewijania)
- 20:31 – przesunięcie osi czasu postępu przewijania
- 25:05 – Wprowadzanie i wychodzenie elementów śledzenia z wykorzystaniem JavaScriptu (ViewTimeline)
- 31:09 – Wprowadzanie i wychodzenie elementów śledzenia za pomocą CSS (view-timeline-name, view-timeline-axis)
- 32:02 – Wyświetl wstawki osi czasu postępu
- 33:07 – Przeglądanie przykładów osi czasu postępów (przepływ pracy okładki, wsuwanie/wysuwanie listy kontaktów, układanie kart)
- 35:40 – Zagraj w to już dziś
- 38:04 – Epilog
Zasoby:
- Prezentacja przepływu pracy (CSS) → https://goo.gle/3SvEQbd
- Prezentacja przepływu okładki (JS+WAAPI) → https://goo.gle/3F9S62h
- Wersja demonstracyjna postępu przewijania (CSS) → https://goo.gle/3F9S6zj
- Demonstracja postępu przewijania (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Obraz Reveal on Enter Demo (CSS) → https://goo.gle/3F9S8XX
- Image Reveal on Enter (JS+WAAPI) → https://goo.gle/3Sto8JK
- Wersja demonstracyjna efektu wysuniętego i wysuwanego → https://goo.gle/3Svg3UE
- Wersja demonstracyjna efektu wysuwanego (JS+WAAPI) → https://goo.gle/3F9Saix
- Wersja demonstracyjna sekcji z przewijaniem poziomym (CSS) → https://goo.gle/3SpaDe5
- Wersja demonstracyjna sekcji przewijania w poziomie (JS+WAAPI) → https://goo.gle/3SAbcBz
- Okładka paralaksy do przyklejonego nagłówka, fałszywy (JS+WAAPI) → https://goo.gle/3SKoMCR
Wersja demonstracyjna układania kart (JS+WAAPI) → https://goo.gle/3VW0wjD
Kolekcja ze wszystkimi wersjami demonstracyjnymi CSS → https://goo.gle/3F9ScqF
Kolekcja ze wszystkimi wersjami JS+WAAPI → https://goo.gle/3F9ScXH
Specyfikacja animacji linkowanych przez przewijanie → https://goo.gle/3F9SduJ
Animacje Polyfill z przewijaniem → https://goo.gle/3SyziN8
Problem z usługą porównywania cen WG „Bring back Scroll-Offsets”→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Więcej filmów z serii HTTP 203 → http://goo.gle/HTTP203
Zasubskrybuj Google Chrome dla deweloperów Chrome tutaj → https://goo.gle/ChromeDevs
Jeśli materiał Ci się spodobał, może spodoba Ci się podcast HTTP203 → https://goo.gle/HTTP203Podcast.