Memperkenalkan "Lepaskan kekuatan Animasi Berbasis Scroll"

Bramus

Dengan bangga kami mengumumkan perilisan "Unleash the Power of Scroll-driven Animations", sebuah video kursus 10 bagian untuk mempelajari semua hal tentang animasi berbasis scroll menggunakan CSS atau JavaScript.

Anda dapat menonton serial ini di YouTube. Episode pertama disematkan di sini.

Animasi berbasis scroll?

Dengan animasi berbasis scroll, Anda dapat menggunakan animasi CSS atau WAAPI yang ada dan menganimasikannya saat men-scroll. Karena itu, animasi berbasis scroll mewarisi semua manfaat yang diberikan API ini. Hal ini mencakup animasi berbasis scroll dengan akselerasi hardware yang tidak mengalami jank saat thread utama diblokir.

Animasi berbasis scroll tersedia di Chrome mulai Chrome 115 dan merupakan kandidat sempurna untuk progressive enhancement.

Dukungan Browser

  • 115
  • 115
  • x

Sumber

Tonton seri video atau baca dokumentasi untuk mempelajari lebih lanjut animasi berbasis scroll.

Episode

Kursus ini terdiri dari 10 episode dan dibagi menjadi dua bagian besar: penjelasan tentang konsep inti yang membentuk animasi berbasis scroll, diikuti dengan beberapa penerapan praktis.

  1. Episode 1: Pengantar.
  2. Episode 2: Konsep Inti: scroll() dan ScrollTimeline.
  3. Episode 3: Konsep Inti: view() dan ViewTimeline.
  4. Episode 4: Konsep Inti: Rentang linimasa diuraikan.
  5. Episode 5: Konsep Inti: Pencarian Linimasa dan Linimasa Bernama.
  6. Episode 6: Penerapan Praktis: Menambahkan Bayangan Scroll ke Penampung Scroll.
  7. Episode 7: Penerapan Praktis: Menganimasikan Elemen ke Berbagai Arah.
  8. Episode 8: Penerapan Praktis: Menganimasikan Model 3D dan Lainnya di Scroll.
  9. Episode 9: Penerapan Praktis: Deteksi Kecepatan Scroll.
  10. Episode 10: Outro.

Episode ini paling baik ditonton secara berurutan karena dibuat berdasarkan demo dan teknik yang dibahas dalam episode sebelumnya. Demo dan alat yang ditampilkan di setiap episode tersedia secara online dan ditautkan dalam deskripsi.

Referensi lainnya