Scroll-gekoppelte Animationen einrichten
Lösen Sie CSS-Animationen aus, wenn Elemente in den Viewport gelangen
Scroll-gekoppelte Animationen einrichten ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Ziel
Scrollverknüpfte Animationen werden abhängig von der Sichtbarkeit eines Elements abgespielt, pausiert oder umgekehrt. Beispiele sind ein Einblenden des Hero-Bereichs, sobald ein Abschnitt ins Sichtfeld scrollt, eine Zahl, die bei Sichtbarkeit hochzählt, oder ein an die Scrollposition gekoppelter Parallax-Effekt. Der IntersectionObserver löst die Animationen aus; CSS oder die Web Animations API führt sie aus.
Triggerbasierte Animationen
Das einfachste Muster: Sobald ein Element in den Viewport gelangt, fügen Sie eine CSS-Klasse hinzu, die die Animation enthält. entry.target.classList.add("in-view") im Observer-Callback; die Klasse definiert animation: fade-in 600ms forwards.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}Observer einrichten
Erstellen Sie einen gemeinsamen Observer, beobachten Sie jedes Element mit der Trigger-Klasse, fügen Sie bei einer Überschneidung "in-view" hinzu und verwenden Sie unobserve, um erneute Auslösungen zu vermeiden. Für Animationen, die nur einmal abgespielt werden, reicht das aus; bei einer Wiederholung nach erneutem Eintritt lassen Sie das Element beobachten und entfernen Sie die Klasse beim Verlassen.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));Staffelungseffekte
Für das schrittweise Einblenden einer Liste wenden Sie über eine benutzerdefinierte CSS-Eigenschaft eine Verzögerung pro Element an: style="--delay: ${i * 100}ms" bei jedem Element; die Animation liest animation-delay: var(--delay). Die Elemente werden nacheinander eingeblendet, sobald die Liste ins Sichtfeld gelangt.
Schwellenwert für frühere Auslösung
threshold: 0.2 wird ausgelöst, wenn 20 % des Elements sichtbar sind – normalerweise ein guter Zeitpunkt für "in-view"-Animationen. threshold: 0 wird zu früh ausgelöst (bei jedem sichtbaren Pixel) und wirkt abrupt; threshold: 1 wird zu spät ausgelöst (erst bei vollständiger Sichtbarkeit) und wirkt verzögert.
Scrollverknüpft vs. scrollausgelöst
Scroll-ausgelöste Animationen werden bei einer Überschneidung einmal abgespielt (wie oben beschrieben). Scroll-verknüpfte Animationen führen ihren Fortschritt synchron zur Scrollposition aus. Der moderne Ansatz sind CSS-scrollgesteuerte Animationen (animation-timeline: scroll()); IntersectionObserver ist weiterhin nützlich, um Triggerzonen zu betreten oder zu verlassen.
Layout-Neuberechnungen vermeiden
Animieren Sie Eigenschaften, die die GPU kostengünstig transformieren kann: transform und opacity. Vermeiden Sie die Animation von top, left, width und height – dadurch wird bei jedem Frame ein Layout ausgelöst, was scrollverknüpfte Animationen auf Geräten der Mittelklasse ruckeln lässt.
Reduzierte Bewegung berücksichtigen
Schließen Sie Animationsdeklarationen in @media (prefers-reduced-motion: no-preference) ein, damit Nutzer, die reduzierte Bewegung anfordern (etwa wegen Gleichgewichtsstörungen oder erhöhter Empfindlichkeit), ohne Bewegung den statischen Endzustand erhalten. Dekorative Animationen sollten bei reduzierter Bewegung vollständig deaktiviert werden.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}Performancemuster
Verwenden Sie einen einzigen gemeinsamen Observer statt eines Observers pro Element. Verwenden Sie unobserve, sobald eine einmalige Animation ausgelöst wurde. Setzen Sie will-change sparsam ein – nur bei Elementen, die gerade animiert werden, und entfernen Sie es nach Ende der Animation. Achten Sie im Performance-Panel auf ausgelassene Frames.
Bidirektionale Animationen
Bei Animationen, die sich umkehren sollen, wenn das Element den Viewport verlässt, dürfen Sie unobserve nicht verwenden. Schalten Sie im Callback die Klasse abhängig von isIntersecting um: entry.target.classList.toggle("in-view", entry.isIntersecting). Beim Eintritt läuft die Animation vorwärts, beim Verlassen rückwärts.
Mit der Web Animations API kombinieren
Bei JavaScript-gesteuerten Animationen ersetzen Sie classList.add durch entry.target.animate(keyframes, options). WAAPI gibt ein Animation-Objekt zurück, das Sie pausieren, umkehren oder über Promises verketten können – für komplexe Abläufe ist das flexibler als CSS.
Wissenscheck
Warum sollten Sie bei scrollverknüpften Animationen transform und opacity einer Animation von top, left, width und height vorziehen?
Zusammenfassung
Scrollverknüpfte Animationen kombinieren IntersectionObserver mit CSS-Animationsklassen oder WAAPI. Legen Sie einen ausgeblendeten Zustand fest, fügen Sie bei einer Überschneidung "in-view" hinzu, animieren Sie transform und opacity statt top und left, berücksichtigen Sie prefers-reduced-motion und staffeln Sie über benutzerdefinierte CSS-Eigenschaften die schrittweise Einblendung. Für vollständige Animationen entlang des Scrollfortschritts können Sie native scrollgesteuerte Animationen in Betracht ziehen (animation-timeline: scroll()).
Häufig gestellte Fragen
Ist die Lektion „Scroll-gekoppelte Animationen einrichten“ kostenlos?
Ja — der vollständige Text von „Scroll-gekoppelte Animationen einrichten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Scroll-gekoppelte Animationen einrichten“?
Lösen Sie CSS-Animationen aus, wenn Elemente in den Viewport gelangen Du übst HTML 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 HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML 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-gekoppelte Animationen einrichten“?
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 HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML 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
- IntersectionObserver API und Schwellenwerte
- Lazy Loading mit IntersectionObserver
- Infinite-Scroll-Implementierung
- Scroll-gekoppelte Animationen einrichten