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

Bramus

CSS veya JavaScript'in kullanıldığı kaydırmaya dayalı animasyonlar hakkında bilgi edinebileceğiniz 10 bölümlük bir video kursu olan "Unleash the Power of Scroll-Driven Animations" (Kaydırma Odaklı Animasyonların Gücünü Kaynaştırın) kursunu duyurmaktan gurur duyuyoruz.

Diziyi YouTube'da izleyebilirsiniz. İlk bölüm buraya yerleştirilmiş.

Kaydırmayla çalışan animasyonlar mı?

Kaydırmayla çalışan animasyonlarla, mevcut bir CSS veya WAAPI animasyonunu alıp kaydırma sırasında canlandırabilirsiniz. Bu nedenle kaydırmaya dayalı animasyonlar, bu API'lerin tüm avantajlarını devralır. Bu, ana iş parçacığı engellendiğinde jank'a tabi olmayan donanım hızlandırmalı, kaydırmaya dayalı animasyonları içerir.

Chrome 115'te Chrome'da kullanılabilen kaydırmalı animasyonlar, aşamalı geliştirme için mükemmel bir adaydır.

Tarayıcı Desteği

  • 115
  • 115
  • x

Kaynak

Kaydırma destekli 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ırmaya dayalı animasyonları oluşturan temel kavramların açıklaması 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ı açıklandı.
  5. 5. Bölüm: Temel Kavramlar: Zaman Çizelgesi Araması 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önlerde Canlandırın.
  8. 8. Bölüm: Pratik Uygulama: Kaydırmada 3D Modelleri Canlandırma ve Daha Fazlası.
  9. 9. Bölüm: Pratik Uygulama: Kaydırma Hızı Algılama.
  10. 10. Bölüm: Kapanış.

Önceki bölümlerde ele alınan demolar ve tekniklere dayanarak hazırlanan bölümler en iyi sırayla izlenir. Her bölümde gösterilen demolar ve araçlar, internet üzerinden mevcuttur ve açıklama bölümünde bağlantısı verilir.

Daha fazla kaynak