JavaScript Academy · Lektion

Scroll-Trigger-Animationen

Animieren Sie Elemente, sobald sie in den sichtbaren Bereich gelangen.

Scroll-Trigger-Animationen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Beim Scrollen animieren

Ein beliebter Effekt besteht darin, Elemente einzublenden oder in den sichtbaren Bereich gleiten zu lassen, während die Nutzerin oder der Nutzer zu ihnen scrollt. Der Intersection Observer macht das übersichtlich: Fügen Sie eine CSS-Klasse hinzu, sobald ein Element in den sichtbaren Bereich gelangt, und überlassen Sie die Animation CSS.

Die CSS-Seite

Definieren Sie in CSS einen verborgenen Ausgangszustand und einen sichtbaren Endzustand. JavaScript schaltet lediglich eine Klasse um; der Übergang erfolgt vollständig in CSS und bleibt dadurch flüssig.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Ziele auswählen

Markieren Sie die zu animierenden Elemente mit einer gemeinsamen Klasse und erfassen Sie sie anschließend.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Den Observer erstellen

Verwenden Sie einen Schwellenwert, damit die Animation beginnt, wenn ein wesentlicher Teil des Elements sichtbar ist und nicht nur ein einzelnes Pixel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Die Klasse hinzufügen

Fügen Sie im Callback den sich überschneidenden Zielelementen die Klasse visible hinzu. CSS animiert sie dann in den sichtbaren Bereich.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Einmalig animieren

Für eine einmalige Einblendung beenden Sie nach dem Hinzufügen der Klasse die Beobachtung des Elements, damit es beim Weg- und Zurückscrollen nicht erneut animiert wird.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

In beide Richtungen animieren

Wenn Elemente beim Verlassen des sichtbaren Bereichs ebenfalls animiert werden sollen, schalten Sie die Klasse abhängig von isIntersecting um und setzen Sie die Beobachtung fort.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Die Beobachtung starten

Beobachten Sie jedes Ziel, um die Verfolgung zu starten. Der Observer wird ausgelöst, während die Nutzerin oder der Nutzer an den einzelnen Zielen vorbeiscrollt.

items.forEach(el => observer.observe(el));

Animationen staffeln

Erzeugen Sie eine Kaskade, indem Sie die Übergangsverzögerung schrittweise erhöhen. Sie können sie aus einem Datenattribut oder dem Index des Elements setzen.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Reduzierte Bewegung berücksichtigen

Manche Nutzerinnen und Nutzer bevorzugen reduzierte Bewegung. Prüfen Sie die Media Query und überspringen Sie für diese Personen die Animationen, sodass die Inhalte sofort angezeigt werden.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Vorteile für die Performance

Da die aufwendigen Aufgaben von CSS-Übergängen übernommen werden und die Sichtbarkeitserkennung an den Browser ausgelagert ist, bleiben Scroll-Animationen auch bei vielen Elementen flüssig. Keine Berechnungen in Scroll-Events, kein Ruckeln.

Schnelltest

Testen Sie Ihr Verständnis der durch Scrollen ausgelösten Animationen.

Zusammenfassung

Sie haben durch Scrollen ausgelöste Animationen implementiert:

Definieren Sie verborgene und sichtbare Zustände in CSS.
Beobachten Sie Ziele mit einem passenden threshold.
Schalten Sie bei einer Überschneidung eine Klasse um; CSS übernimmt die Animation.
Verwenden Sie unobserve für einmalige Einblendungen.
Berücksichtigen Sie prefers-reduced-motion.

Sie haben den Intersection Observer abgeschlossen. Als Nächstes geht es um Web Workers.

Häufig gestellte Fragen

Ist die Lektion „Scroll-Trigger-Animationen“ kostenlos?

Ja — der vollständige Text von „Scroll-Trigger-Animationen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Scroll-Trigger-Animationen“?

Animieren Sie Elemente, sobald sie in den sichtbaren Bereich gelangen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Scroll-Trigger-Animationen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy