Animowanie elementów podczas przewijania

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 19 z 27.

Czasami chcemy, aby elementy animowały się (pojawiały się przez zanikanie, wsuwały się, powiększały itp.) gdy podczas przewijania pojawiają się w obszarze widocznym na ekranie.
Robi się to często, sprawdzając, czy element jest widoczny na ekranie, a następnie dodając klasę, która uruchamia animację lub przejście CSS.

Najpierw utwórzmy prosty element HTML:

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

Następnie dodaj CSS dla animacji:

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

Teraz utwórzmy funkcję JavaScript wykrywającą, kiedy elementy pojawiają się w polu widzenia. Ponieważ może być ich wiele, przechodzimy przez nie za pomocą forEach i sprawdzamy pozycję każdego elementu względem obszaru widoku.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Pobierz położenie elementu względem obszaru widocznego w oknie przeglądarki
    const position = element.getBoundingClientRect();
    
    // Jeśli element znajduje się w obszarze widocznym w oknie przeglądarki
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Uruchom podczas przewijania
window.addEventListener('scroll', checkScroll);

// Uruchom raz po załadowaniu strony
checkScroll();

Gdy element z klasą animate-on-scroll pojawi się w obszarze widoku, skrypt dodaje klasę visible, uruchamiając animację.

Wyzwanie

Łatwy

Wewnątrz pętli utwórz instrukcję warunkową if.

Warunek powinien sprawdzać, czy pozycja górnej krawędzi elementu jest mniejsza niż window.innerHeight - 50.
Jeśli warunek jest prawdziwy, użyj .classList.add("active"), aby dodać klasę active do tego elementu.

Dzięki temu, gdy element przewinie się do widoku (na odległość 50px od dolnej krawędzi ekranu), płynnie się pojawi.

Spróbuj swoich sił

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