Kaydırma ile öğe animasyonları

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 19 / 27.

Bazen öğelerin (yavaşça belirme, kayarak girme, yakınlaştırma vb.) kaydırma sırasında görünüm alanına girdiklerinde animasyonla gelmesini isteriz.
Bu genellikle öğenin ekranda görünür olup olmadığı kontrol edilerek ve ardından bir CSS animasyonunu veya geçişini tetikleyen bir sınıf eklenerek yapılır.

İlk olarak, basit bir HTML öğesi oluşturalım:

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

Ardından, animasyon için CSS ekleyin:

.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);
}

Şimdi, öğelerin görünüm alanına ne zaman girdiğini algılamak için bir JavaScript fonksiyonu oluşturalım. Birden fazla öğemiz olabileceği için, forEach ile bunlar üzerinde döngü kuruyoruz ve her bir öğenin görünüm alanına göre konumunu kontrol ediyoruz.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Öğenin görünüm alanına göre konumunu al
    const position = element.getBoundingClientRect();
    
    // Eğer öğe görünüm alanındaysa
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Kaydırma sırasında çalıştır
window.addEventListener('scroll', checkScroll);

// Sayfa yüklendiğinde bir kez çalıştır
checkScroll();

animate-on-scroll sınıfına sahip bir öğe görünüm alanına girdiğinde, betik visible sınıfını ekleyerek animasyonu tetikler.

Görev

Kolay

Döngünün içinde bir if ifadesi oluşturun.

Koşul şunu kontrol etmelidir: öğenin üst konumu, window.innerHeight - 50 değerinden küçükse.
Eğer koşul doğruysa, o öğeye active sınıfını eklemek için .classList.add("active") kullanın.

Bu sayede, bir öğe ne zaman görünüm alanına girerse (ekranın altından 50 piksel mesafe içinde), sorunsuz bir şekilde yavaşça belirecektir.

Kendin dene

<!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>