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 digerakkan scroll mewarisi semua manfaat yang diberikan oleh API ini. Hal ini mencakup animasi yang digerakkan scroll yang dipercepat hardware yang tidak mengalami jank saat thread utama diblokir.

Animasi yang digerakkan scroll tersedia di Chrome mulai Chrome 115 dan merupakan kandidat yang sempurna untuk peningkatan progresif.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

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

Episode

Kursus ini terdiri dari 10 episode dan dibagi menjadi dua bagian besar: penjelasan tentang konsep inti yang membentuk animasi yang digerakkan 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 disederhanakan.
  5. Episode 5: Konsep Inti: Pencarian Linimasa dan Linimasa Bernama.
  6. Episode 6: Penerapan Praktis: Menambahkan Bayangan Scroll ke Penampung Scroll.
  7. Episode 7: Aplikasi Praktis: Menganimasikan Elemen ke Arah yang Berbeda.
  8. Episode 8: Aplikasi Praktis: Menganimasikan Model 3D dan Lainnya saat Men-scroll.
  9. Episode 9: Aplikasi Praktis: Deteksi Kecepatan Scroll.
  10. Episode 10: Penutup.

Episode ini sebaiknya ditonton secara berurutan karena membahas 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