Was ist Scroll-Driven-Animation-Generator?
Scroll-Driven Animations verwenden die Scrollposition oder Viewport-Position eines Elements als Animations-Zeitachse anstelle von Zeit. Die scroll()-Funktion verfolgt die Scrollcontainer-Position, die view()-Funktion verfolgt die Position eines Elements im Viewport. Dies ermöglicht Lesefortschrittsbalken, Einblendeffekte und scrollgebundene Animationen mit reinem CSS.
Kurze Antwort
Scroll-Driven Animations verknüpfen den Animationsfortschritt direkt mit der Scrollposition eines Containers und machen Scroll-Event-Listener und JavaScript-basierte Parallax-Bibliotheken überflüssig.
Last updated: 2026-05-25
Einschränkungen
- Chrome 115+ und Edge 115+ unterstützen Scroll-Driven Animations. Firefox und Safari unterstützen die ScrollTimeline-API noch nicht.
- Scroll-Driven Animations verwenden die Web Animations API. CSS @keyframes werden weiterhin benötigt.
- scroll()- und view()-Timing wird durch die Scroll-Distanz bestimmt. Animationen können sich bei sehr kurzen oder sehr langen Inhalten anders verhalten.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie den Zeitachsentyp: scroll (verfolgt den Scrollcontainer) oder view (verfolgt die Elementposition im Viewport).
- Legen Sie den Animationsbereich und die Keyframes für den gewünschten Effekt fest.
- Das Tool generiert das CSS für das animierte Element.
- Kopieren Sie das CSS und testen Sie es auf einer scrollbaren Seite.
Wofür du es nutzen kannst
- Erstellen Sie einen Lesefortschrittsbalken oben in einem Blogbeitrag.
- Bauen Sie Einblend- oder Einflug-Effekte beim Hineinscrollen in Abschnitte.
- Fügen Sie eine Parallax- oder scrollgebundene Hintergrundanimation hinzu.