"Kaydırma Odaklı Animasyonların gücünden yararlanın"

Bramus

CSS veya JavaScript kullanarak kaydırmayla çalışan animasyonlar hakkında her şeyi öğrenebileceğiniz 10 bölümlük bir video kursu olan "Kaydırmayla Çalışan Animasyonların Gücünü Kullanın" kursunun kullanıma sunulduğunu duyurmaktan mutluluk duyuyoruz.

Seriyi YouTube'da izleyebilirsiniz. İlk bölümü burada bulabilirsiniz.

Kaydırmayla çalışan animasyonlar?

Kaydırmayla çalışan animasyonlarla, mevcut bir CSS veya WAAPI animasyonunu kaydırma sırasında animasyonlu hale getirebilirsiniz. Bu nedenle, kaydırmayla çalışan animasyonlar bu API'lerin sunduğu tüm avantajlardan yararlanır. Buna, ana iş parçacığı engellendiğinde takılmaya maruz kalmayan, donanım hızlandırmalı kaydırma odaklı animasyonlar da dahildir.

Kaydırmayla çalışan animasyonlar, Chrome 115'ten itibaren Chrome'da kullanılabilir ve aşamalı iyileştirme için mükemmel bir adaydır.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

Kaydırmayla çalışan animasyonlar hakkında daha fazla bilgi edinmek için video serisini izleyin veya dokümanları okuyun.

Bölümler

10 bölümden oluşan kurs iki büyük bölüme ayrılmıştır: kaydırmayla çalışan animasyonları oluşturan temel kavramların açıklandığı bir bölüm ve ardından birkaç pratik uygulama.

  1. 1. Bölüm: Giriş.
  2. 2. Bölüm: Temel Kavramlar: scroll() ve ScrollTimeline.
  3. 3. Bölüm: Temel Kavramlar: view() ve ViewTimeline.
  4. 4. Bölüm: Temel Kavramlar: Zaman çizelgesi aralıklarını anlama.
  5. 5. Bölüm: Temel Kavramlar: Zaman Çizelgesi Arama ve Adlandırılmış Zaman Çizelgeleri.
  6. 6. Bölüm: Pratik Uygulama: Kaydırma Kapsayıcısına Kaydırma Gölgeleri Ekleme.
  7. 7. Bölüm: Pratik Uygulama: Öğeleri Farklı Yönlere Hareket Ettirme.
  8. 8. Bölüm: Pratik Uygulama: Kaydırma sırasında 3D modelleri ve diğer öğeleri canlandırma.
  9. 9. Bölüm: Pratik Uygulama: Kaydırma Hızı Algılama.
  10. 10. Bölüm: Outro.

Önceki bölümlerde ele alınan demoları ve teknikleri temel aldığından bölümleri sırayla izlemeniz önerilir. Her bölümde gösterilen demoları ve araçları internette bulabilir, açıklama bölümündeki bağlantılara tıklayarak ulaşabilirsiniz.

Diğer kaynaklar