Elemente beim Scrollen animieren

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 19 von 27.

Manchmal möchten wir, dass Elemente animiert werden (einblenden, einschieben, zoomen usw.), wenn sie beim Scrollen in den Viewport eintreten.
Dies geschieht häufig, indem geprüft wird, ob das Element auf dem Bildschirm sichtbar ist, und dann eine Klasse hinzugefügt wird, die eine CSS-Animation oder einen CSS-Übergang auslöst.

Zuerst erstellen wir ein einfaches HTML-Element:

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

Fügen Sie als Nächstes CSS für die Animation hinzu:

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

Lassen Sie uns nun eine JavaScript-Funktion erstellen, um zu erkennen, wann Elemente in das Sichtfeld gescrollt werden. Da wir mehrere Elemente haben können, durchlaufen wir diese mit forEach und prüfen die Position jedes Elements im Verhältnis zum Viewport.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Elementposition relativ zum Viewport abrufen
    const position = element.getBoundingClientRect();
    
    // Wenn sich das Element im Viewport befindet
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Beim Scrollen ausführen
window.addEventListener('scroll', checkScroll);

// Einmal beim Laden der Seite ausführen
checkScroll();

Wenn ein Element mit der Klasse animate-on-scroll in den Viewport eintritt, fügt das Skript die Klasse visible hinzu, was die Animation auslöst.

Aufgabe

Einfach

Erstellen Sie innerhalb der Schleife eine if-Anweisung.

Die Bedingung sollte prüfen: ob die obere Position (top position) des Elements kleiner als window.innerHeight - 50 ist.
Wenn die Bedingung wahr ist, verwenden Sie .classList.add("active"), um die Klasse active zu diesem Element hinzuzufügen.

Auf diese Weise wird jedes Mal, wenn ein Element in den Sichtbereich scrollt (innerhalb von 50px vom unteren Bildschirmrand), ein sanftes Einblenden ausgelöst.

Probier es selbst

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