Reveal beim Scrollen, ein Lesefortschrittsbalken, Parallax und eine Sticky Story, jeweils auf drei Arten gebaut: CSS Scroll-driven Animations, IntersectionObserver und GSAP ScrollTrigger.
Scroll-Animationen spielen Effekte ab, wenn Inhalte ins Bild kommen oder die Seite gescrollt wird. Modernes CSS verknüpft Keyframes mit dem Scrollen über animation-timeline: view() oder scroll(), wo unterstützt ganz ohne Skript. IntersectionObserver in JavaScript löst Reveal-Klassen überall aus, und GSAP ScrollTrigger übernimmt Pinning und gescrubbte Timelines. Berücksichtige immer prefers-reduced-motion.
Wähle einen Ansatz
Die vier am häufigsten gewünschten Effekte, Reveal beim Scrollen, ein Lesefortschrittsbalken, Parallax und eine Sticky Story, werden jeweils in reinem CSS, in einfachem JavaScript mit IntersectionObserver und in GSAP ScrollTrigger gezeigt. Die CSS-Versionen laufen live in scrollbaren Rahmen, und die Observer-Version läuft als funktionierende Demo direkt auf dieser Seite.
Es koppelt den Fortschritt einer Animation an das Scrollen statt an die Zeit. scroll() folgt dem, wie weit ein Scroll-Container von oben nach unten gescrollt wurde. view() folgt dem Weg eines einzelnen Elements durch den sichtbaren Bereich, sodass die Keyframes ablaufen, während es hinein- und wieder herauswandert.
Chrome und Edge seit Version 115 und Safari seit Version 26. In Firefox steckte die Funktion hinter einer Einstellung, statt standardmäßig aktiv zu sein. Prüfe also caniuse, bevor du dich darauf verlässt, und biete immer einen Fallback.
Um zu erkennen, wann ein Element ins Bild kommt oder es verlässt, ja. Der Browser berechnet Überschneidungen asynchron und ruft dich nur bei Änderungen auf, während ein Scroll-Listener viele Male pro Sekunde läuft und dazu verleitet, Layoutwerte auszulesen, was Ruckeln verursacht.
Nicht für einfache Reveals oder einen Fortschrittsbalken. GSAP ScrollTrigger lohnt sich für gepinnte Abschnitte, gescrubbte mehrstufige Timelines, Snapping und Effekte, die sich heute in jedem Browser gleich verhalten müssen.
Zeige den Inhalt innerhalb einer Media Query prefers-reduced-motion: reduce im Endzustand und verzichte auf Parallax und große Bewegungen. Prüfe in JavaScript mit window.matchMedia dieselbe Query, bevor du Animationen erzeugst. Sanfte Einblendungen über opacity sind meist in Ordnung.
Jeder Rahmen scrollt für sich. In einem Browser ohne animation-timeline lässt der @supports-Schutz alles sichtbar und unbewegt.
Jede Karte wird eingeblendet und steigt auf, während sie in den Viewport kommt. animation-range beschränkt den Effekt auf die Eintrittsphase.
scroll(root) folgt dem Scroller des Dokuments. Der Balken skaliert von 0 auf volle Breite, ganz ohne Listener.
Die innere Ebene bewegt sich langsamer als die Seite, während ihre Box den Viewport durchquert. Bei reduzierter Bewegung abgeschaltet.
Das Bild bleibt mit position: sticky fixiert, während jeder Schritt heller wird, sobald er die Mitte des Rahmens kreuzt.
Die Live-Demo oben auf dieser Seite führt genau dieses Muster in React aus. Diese Versionen funktionieren mit jedem Framework oder ganz ohne.
Karten starten nur dann versteckt, wenn das Skript gelaufen ist, weil es zuerst eine Klasse zu html hinzufügt. Ein fehlgeschlagenes Skript lässt sie also sichtbar.
Der Fortschritt braucht die exakte Scrollposition, daher nutzt dieser einen passiven Scroll-Listener, gedrosselt auf einen Frame.
Ein schmales Beobachtungsband in der Bildschirmmitte markiert den Schritt als aktiv, der es gerade kreuzt.
Nur Code. ScrollTrigger ist ein GSAP-Plugin; beide sind unter der eigenen Lizenz von GSAP kostenlos nutzbar, die du vor dem Livegang lesen solltest.
gsap.matchMedia führt die Einrichtung nur aus, wenn der Leser keine reduzierte Bewegung angefordert hat, und macht sie rückgängig, wenn sich die Einstellung ändert.
Scrolle in der Box. Karten werden einmal eingeblendet, der Balken zeigt den Fortschritt, die gestreifte Ebene bewegt sich langsamer als der Inhalt, und das fixierte Panel folgt dem Schritt, der die Mitte kreuzt.
Reduzierte Bewegung ist aktiv, daher erscheinen Karten ohne Bewegung und Parallax ist aus.
Scrollfortschritt in der Demo
Scrollbarer Demo-Bereich
Fang an zu scrollen.
Parallax-Ebene
Kostenlos starten · Keine Kreditkarte nötig