Memperkenalkan "Lepaskan kekuatan Animasi Berbasis Scroll"

Bramus

Dengan bangga kami mengumumkan rilis "Unleash the Power of Scroll-Driven Animations", kursus video 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 mengambil animasi CSS atau WAAPI yang ada dan menganimasikannya saat men-scroll. Oleh karena itu, animasi yang didorong scroll mewarisi semua manfaat yang diberikan API ini. Hal ini mencakup animasi yang didorong scroll yang dipercepat hardware dan tidak mengalami jank saat thread utama diblokir.

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

Browser Support

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

Source

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

Episode

Kursus ini terdiri dari 10 episode dan dibagi menjadi dua bagian besar: penjelasan tentang konsep inti yang membentuk animasi yang didorong scroll, diikuti dengan beberapa aplikasi 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 yang mudah dipahami.
  5. Episode 5: Konsep Inti: Pencarian Linimasa dan Linimasa Bernama.
  6. Episode 6: Practical Application: Add Scroll Shadows to a Scroll Container.
  7. Episode 7: Penerapan Praktis: Menganimasikan Elemen dalam Berbagai Arah.
  8. Episode 8: Practical Application: Animate 3D Models and More on Scroll.
  9. Episode 9: Aplikasi Praktis: Deteksi Kecepatan Scroll.
  10. Episode 10: Outro.

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

Referensi lainnya