JavaScript Academy · Pelajaran

Animasi yang Dipicu Guliran

Animasikan elemen saat elemen tersebut masuk ke tampilan.

Animasi yang Dipicu Guliran adalah pelajaran JavaScript 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Menganimasikan Saat Menggulir

Efek yang populer adalah membuat elemen memudar atau meluncur masuk ke area tampilan saat pengguna menggulir ke arahnya. IntersectionObserver membuatnya rapi: tambahkan kelas CSS saat elemen memasuki area tampilan dan biarkan CSS menangani animasinya.

Sisi CSS

Tentukan keadaan awal yang tersembunyi dan keadaan akhir yang terlihat dalam CSS. JavaScript hanya mengubah kelas; transisinya sepenuhnya ditangani CSS sehingga tetap mulus.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Memilih Sasaran

Tandai elemen yang ingin Anda animasikan dengan kelas bersama, lalu kumpulkan elemen tersebut.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Membuat Observer

Gunakan ambang batas agar animasi dimulai saat bagian elemen yang cukup berarti terlihat, bukan hanya satu piksel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Menambahkan Kelas

Dalam fungsi panggil balik, tambahkan kelas visible ke sasaran yang beririsan. CSS kemudian menganimasikannya masuk ke area tampilan.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Menganimasikan Sekali

Untuk tampilan yang hanya muncul sekali, hentikan pengamatan elemen setelah menambahkan kelas agar elemen tidak dianimasikan ulang saat digulir menjauh lalu kembali.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Menganimasikan Ulang ke Dua Arah

Jika Anda ingin elemen menganimasikan saat keluar, gunakan toggle pada kelas berdasarkan isIntersecting dan teruskan pengamatan.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Memulai Pengamatan

Awasi setiap sasaran untuk mulai melacaknya. Observer dijalankan saat pengguna menggulir melewati masing-masing sasaran.

items.forEach(el => observer.observe(el));

Mengatur Jeda Animasi

Buat efek berurutan dengan menerapkan penundaan transisi yang bertahap. Anda dapat mengaturnya dari atribut data atau indeks elemen.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Menghormati Gerakan yang Dikurangi

Sebagian pengguna lebih menyukai gerakan yang dikurangi. Periksa kueri media dan lewati animasi untuk mereka, lalu tampilkan konten segera.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Keuntungan Performa

Karena pekerjaan berat ditangani oleh transisi CSS dan deteksi visibilitas dialihkan ke peramban, animasi pengguliran tetap mulus meskipun terdapat banyak elemen. Tidak ada perhitungan peristiwa pengguliran dan tidak ada gerakan tersendat.

Pemeriksaan Singkat

Uji pemahaman Anda tentang animasi yang dipicu pengguliran.

Ringkasan

Anda telah membuat animasi yang dipicu pengguliran:

Tentukan keadaan tersembunyi dan terlihat dalam CSS.
Awasi sasaran dengan threshold yang sesuai.
Ubah kelas saat terjadi perpotongan; CSS yang menjalankan animasinya.
Gunakan unobserve untuk tampilan yang hanya muncul sekali.
Patuhi prefers-reduced-motion.

Anda telah menyelesaikan IntersectionObserver. Berikutnya, Pekerja Web.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Animasi yang Dipicu Guliran” gratis?

Ya — teks lengkap “Animasi yang Dipicu Guliran” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Animasi yang Dipicu Guliran”?

Animasikan elemen saat elemen tersebut masuk ke tampilan. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 “Animasi yang Dipicu 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

← Kembali ke JavaScript Academy