Animasi elemen saat halaman digulir

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 19 dari 27.

Terkadang kita ingin elemen beranimasi (memudar, meluncur, memperbesar, dan sebagainya) saat elemen tersebut masuk ke area tampilan ketika kamu menggulir halaman.
Ini biasanya dilakukan dengan memeriksa apakah elemen terlihat di layar, lalu menambahkan class yang memicu animasi atau transisi CSS.

Pertama, mari buat elemen HTML sederhana:

<div class="animate-on-scroll">This element will animate when scrolled into view</div>

Selanjutnya, tambahkan CSS untuk animasi:

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Sekarang, mari buat fungsi JavaScript untuk mendeteksi kapan elemen bergulir ke dalam tampilan. Karena mungkin ada beberapa elemen, kita menelusurinya dengan forEach dan memeriksa posisi setiap elemen relatif terhadap viewport.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Dapatkan posisi element relatif terhadap viewport
    const position = element.getBoundingClientRect();
    
    // Jika element berada di dalam viewport
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Jalankan saat halaman digulir
window.addEventListener('scroll', checkScroll);

// Jalankan sekali saat halaman dimuat
checkScroll();

Saat elemen dengan class animate-on-scroll memasuki area pandang, script menambahkan class visible, sehingga memicu animasi.

Tantangan

Mudah

Di dalam perulangan, buat pernyataan if.

Kondisinya harus memeriksa: apakah posisi atas elemen kurang dari window.innerHeight - 50.
Jika kondisinya benar, gunakan .classList.add("active") untuk menambahkan class active ke elemen tersebut.

Dengan begitu, setiap kali elemen masuk ke tampilan (dalam jarak 50px dari bagian bawah layar), elemen tersebut akan memudar masuk dengan mulus.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Animation Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Discover the Beauty of Nature</h1>
    <p>Scroll down to reveal the magic</p>
  </header>

  <div class="container">
    <div class="fade-in card">
      <h2>Mountains</h2>
      <p>Standing tall and timeless, mountains remind us of strength and stability.</p>
    </div>

    <div class="fade-in card">
      <h2>Forests</h2>
      <p>Forests are the lungs of our planet, offering peace and endless green beauty.</p>
    </div>

    <div class="fade-in card">
      <h2>Rivers</h2>
      <p>Calm or powerful, rivers flow endlessly, connecting life along their paths.</p>
    </div>

    <div class="fade-in card">
      <h2>Deserts</h2>
      <p>Silent and vast, deserts teach us resilience and the value of every drop of water.</p>
    </div>

    <div class="fade-in card">
      <h2>Oceans</h2>
      <p>The oceans cover most of our Earth, a mysterious world full of wonder and life.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>