Bramus, yalnızca HTML ve CSS tarafından desteklenen Kaydırma Bağlantılı Animasyonlara yönelik heyecanını paylaşıyor. WAAPI ile entegre olan JavaScript seçeneği de dahildir!
Bölümler:
- 00:00 - Giriş
- 00:15 - Giriş + Fragman Örneği
- 03:41 - Kaydırma Bağlantılı ve Kaydırmayla Tetiklenen Animasyonlar
- 05:18 - CSS Kullanılan Temel Örnek (Belge Zaman Çizelgesi, Kaydırma İlerleme Zaman Çizelgesi, Scroll(), animasyon-zaman çizelgesi)
- 12:31 - JavaScript (ScrollTimeline) Kullanımıyla İlgili Temel Örnek
- 14:06 - Adlandırılmış Kaydırma İlerleme Zaman Çizelgeleri (kaydırma-zaman çizelgesi-adı, kaydırma zaman çizelgesi-ekseni)
- 20:31 - Kaydırma İlerleme Zaman Çizelgesi Kaydırmaları
- 25:05 - JavaScript kullanarak giriş/çıkış sırasında izleme öğeleri (ViewTimeline)
- 31:09 - CSS kullanarak girdikleri/çıkardıkları sırada İzleme Öğeleri (görünüm-zaman çizelgesi-adı, görüntüleme zaman çizelgesi-ekseni)
- 32:02 - İlerleme zaman çizelgesi eklerini görüntüleyin
- 33:07 - İlerleme Zaman Çizelgesi Örneklerini Görüntüle (Kapak Akışı, Kişi Listesi Giriş/Çıkış, Kartlar)
- 35:40 - Bugün oynayın!
- 38:04 - Son söz
Kaynaklar:
- Kapak Akışı Demosu (CSS) → https://goo.gle/3SvEQbd
- Kapak Akışı Demosu (JS+WAAPI) → https://goo.gle/3F9S62h
- Kaydırma İlerleme Demosu (CSS) → https://goo.gle/3F9S6zj
- Kaydırma İlerleme Demosu (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Enter Demo'da Resim Gösterme (CSS) → https://goo.gle/3F9S8XX
- Enter Demo'da Resim Gösterme (JS+WAAPI) → https://goo.gle/3Sto8JK
- Giriş ve çıkış efekti Demosu (CSS) listeleme →https://goo.gle/3Svg3UE
- Giriş ve çıkış efekti Demosu (JS+WAAPI) listeleme: https://goo.gle/3F9Saix
- Horizontal Scroll Bölüm Demosu (CSS) → https://goo.gle/3SpaDe5
- Horizontal Scroll Bölüm Demosu (JS+WAAPI) → https://goo.gle/3SAbcBz
- Yapışkan Başlık için Paralaks Kapağı, sahte (JS+WAAPI) → https://goo.gle/3SKoMCR
Yığma Kartları Demosu (JS+WAAPI) → https://goo.gle/3VW0wjD
Tüm CSS demolarının bulunduğu koleksiyon → https://goo.gle/3F9ScqF
Tüm JS+WAAPI Demoları içeren koleksiyon → https://goo.gle/3F9ScXH
Kaydırma Bağlantılı Animasyonlar Spesifikasyonu → https://goo.gle/3F9SduJ
Kaydırma Bağlantılı Animasyonlar Çoklu Doldurma → https://goo.gle/3SyziN8
CSS WG Sorunu "Bring back Scroll-offsets"→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
HTTP 203 serisindeki diğer videolar → http://goo.gle/HTTP203
Google Chrome Geliştiricilerine buradan abone olun → https://goo.gle/ChromeDevs
Bu video hoşunuza gittiyse HTTP203 podcast'ini de beğenebilirsiniz → https://goo.gle/HTTP203Podcast