Menyiapkan Animasi yang Terhubung dengan Guliran
Picu animasi CSS saat elemen masuk ke area pandang.
Menyiapkan Animasi yang Terhubung dengan Guliran adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Tujuan
Animasi yang terkait dengan guliran dapat diputar, dijeda, atau dibalik berdasarkan visibilitas elemen. Contohnya adalah bagian utama yang memudar saat suatu bagian masuk ke area pandang, angka yang terus bertambah saat terlihat, dan efek paralaks yang terikat pada posisi guliran. IntersectionObserver memicu animasi tersebut; CSS atau API Animasi Web menjalankannya.
Animasi Berbasis Pemicu
Pola paling sederhana: saat elemen memasuki area pandang, tambahkan kelas CSS yang berisi animasi. entry.target.classList.add("in-view") dalam fungsi panggilan balik pengamat; kelas tersebut mendefinisikan animation: fade-in 600ms forwards.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}Penyiapan Pengamat
Buat satu pengamat bersama, amati setiap elemen dengan kelas pemicu, tambahkan "in-view" saat terjadi persinggungan, lalu gunakan unobserve agar tidak terpicu kembali. Untuk animasi satu kali, hanya itu yang diperlukan; untuk mengulang saat masuk kembali, jangan gunakan unobserve dan hapus kelas saat elemen keluar.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));Efek Bertahap
Untuk menampilkan daftar secara berurutan, terapkan jeda per item melalui properti khusus CSS: style="--delay: ${i * 100}ms" pada setiap item; animasi membaca animation-delay: var(--delay). Item-item dianimasikan secara berantai saat daftar masuk ke area pandang.
Ambang untuk Pemicu Lebih Awal
threshold: 0.2 terpicu saat 20% elemen terlihat — biasanya ini saat yang tepat untuk animasi "in-view". threshold: 0 terpicu terlalu cepat (oleh satu piksel pun) sehingga tampilannya mendadak; threshold: 1 terpicu terlalu lambat (saat elemen terlihat sepenuhnya) sehingga terasa tertunda.
Animasi Terkait Guliran vs Dipicu Guliran
Animasi yang dipicu guliran diputar sekali saat terjadi persinggungan (seperti yang dibahas di atas). Animasi yang terkait guliran memajukan progresnya selaras dengan posisi guliran. Cara modernnya adalah animasi yang digerakkan guliran CSS (animation-timeline: scroll()), sementara IntersectionObserver tetap berguna untuk mendeteksi masuk dan keluar dari zona pemicu.
Menghindari Ketidakstabilan Tata Letak
Animasikan properti yang dapat ditransformasikan GPU dengan biaya rendah: transformasi dan opasitas. Hindari menganimasikan posisi atas, kiri, lebar, dan tinggi — properti tersebut memicu penghitungan tata letak pada setiap bingkai, sehingga animasi yang terikat pada guliran tersendat pada perangkat kelas menengah.
Hormati Pengurangan Gerakan
Bungkus deklarasi animasi dalam @media (prefers-reduced-motion: no-preference) agar pengguna yang meminta pengurangan gerakan (karena gangguan vestibular atau sensitivitas) mendapatkan keadaan akhir statis tanpa gerakan. Animasi dekoratif sebaiknya dinonaktifkan sepenuhnya saat pengurangan gerakan dipilih.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}Pola Kinerja
Gunakan satu pengamat bersama, bukan satu pengamat untuk setiap elemen. Gunakan unobserve setelah animasi satu kali terpicu. Gunakan will-change secara hemat — hanya pada elemen yang sedang dianimasikan, lalu hapus setelah animasi selesai. Amati panel Kinerja untuk menemukan bingkai yang terlewat.
Animasi Dua Arah
Untuk animasi yang harus berbalik saat elemen meninggalkan area pandang, jangan gunakan unobserve. Dalam fungsi panggilan balik, ubah kelas berdasarkan isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting). Animasi berjalan maju saat elemen masuk dan berbalik saat elemen keluar.
Menggabungkan dengan API Animasi Web
Untuk animasi yang digerakkan JS, ganti classList.add dengan entry.target.animate(keyframes, options). WAAPI mengembalikan objek Animasi yang dapat Anda jeda, balik, atau rangkai melalui promise — lebih fleksibel daripada CSS untuk rangkaian yang kompleks.
Pemeriksaan Pengetahuan
Mengapa menganimasikan transformasi dan opasitas lebih disarankan daripada menganimasikan posisi atas, kiri, lebar, dan tinggi dalam animasi yang terkait dengan guliran?
Ringkasan
Animasi yang terkait dengan guliran menggabungkan IntersectionObserver dengan kelas animasi CSS atau WAAPI. Tetapkan keadaan tersembunyi, tambahkan "in-view" saat terjadi persinggungan, animasikan transformasi dan opasitas (bukan posisi atas atau kiri), hormati preferensi pengurangan gerakan, dan atur jeda bertahap melalui properti khusus CSS untuk menampilkan elemen secara berantai. Untuk animasi dengan progres guliran penuh, pertimbangkan animasi asli yang digerakkan guliran (animation-timeline: scroll()).
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menyiapkan Animasi yang Terhubung dengan Guliran” gratis?
Ya — teks lengkap “Menyiapkan Animasi yang Terhubung dengan Guliran” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menyiapkan Animasi yang Terhubung dengan Guliran”?
Picu animasi CSS saat elemen masuk ke area pandang. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menyiapkan Animasi yang Terhubung dengan Guliran” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- IntersectionObserver API dan Ambang Batas
- Pemuatan Malas dengan IntersectionObserver
- Implementasi Gulir Tanpa Akhir
- Menyiapkan Animasi yang Terhubung dengan Guliran