Kaydırmada öğeleri canlandırma

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 19 / 27.

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

Önce basit bir HTML öğesi oluşturalım:

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

Sonra, 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 kaydırıldığını algılamak için bir JavaScript işlevi oluşturalım. Birden fazla öğemiz olabileceğinden, forEach ile bunların üzerinden geçip her öğenin görünüm alanına göre konumunu kontrol ederiz.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Öğenin görüntü alanına göre konumunu al
    const position = element.getBoundingClientRect();
    
    // Öğe görüntü 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üntü alanına girdiğinde, betik visible sınıfını ekleyerek animasyonu başlatır.

Görev

Kolay

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

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

Böylece bir öğe görünür alana kaydırıldığında (ekranın altından 50px içinde), yumuşak bir şekilde 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>