Elemente beim Scrollen animieren

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

Manchmal möchten wir, dass Elemente animiert werden (eingeblendet werden, hereingleiten, vergrößert werden usw.), wenn sie beim Scrollen in den sichtbaren Bereich gelangen.
Dies wird oft erreicht, indem geprüft wird, ob das Element auf dem Bildschirm sichtbar ist, und anschließend eine Klasse hinzugefügt wird, die eine CSS-Animation oder -Transition auslöst.

Erstellen wir zuerst ein einfaches HTML-Element:

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

Füge 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);
}

Erstellen wir nun eine JavaScript-Funktion, die erkennt, wann Elemente ins Sichtfeld scrollen. Da es mehrere Elemente geben kann, durchlaufen wir sie mit forEach und prüfen die Position jedes Elements relativ zum Ansichtsfenster.

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

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

// Beim Laden der Seite einmal ausführen
checkScroll();

Wenn ein Element mit der Klasse animate-on-scroll in den Darstellungsbereich gelangt, fügt das Skript die Klasse visible hinzu und löst dadurch die Animation aus.

Aufgabe

Einfach

Erstelle innerhalb der Schleife eine if-Anweisung.

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

So blendet sich ein Element sanft ein, sobald es beim Scrollen in den sichtbaren Bereich gelangt (innerhalb von 50px vom unteren Bildschirmrand).

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>