Memperkenalkan "Lepaskan kekuatan Animasi Berbasis Scroll"

Bramus

Dengan bangga kami mengumumkan peluncuran "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 menggunakan animasi CSS atau WAAPI yang ada dan menganimasikannya saat scroll. Oleh karena itu, animasi berbasis scroll mewarisi semua manfaat yang diberikan API ini. Hal ini mencakup animasi berbasis scroll yang dipercepat hardware yang tidak tunduk pada jank saat thread utama diblokir.

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

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

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

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 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 tidak rumit.
  5. Episode 5: Konsep Inti: Pencarian Linimasa dan Linimasa Bernama.
  6. Episode 6: Aplikasi Praktis: Menambahkan Bayangan Scroll ke Container Scroll.
  7. Episode 7: Aplikasi Praktis: Menganimasikan Elemen ke Arah yang Berbeda.
  8. Episode 8: Aplikasi Praktis: Menganimasikan Model 3D dan Lainnya saat Scroll.
  9. Episode 9: Aplikasi Praktis: Deteksi Kecepatan Scroll.
  10. Episode 10: Penutup.

Episode sebaiknya 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