Animation beim Scrollen (Scroll Reveal in CSS)

Animation beim Scrollen (Scroll Reveal in CSS): wofür es gut ist

Abschnitte, die beim Scrollen erscheinen, machen die Seite lebendiger. Dieser Generator erzeugt den Effekt nur mit CSS, mit scroll-gesteuerten Animationen (animation-timeline: view()), ohne Bibliotheken wie AOS oder ScrollReveal.

Wähle den Effekt (hochfahren, nur einblenden, von der Seite gleiten, wachsen oder aus der Unschärfe kommen), den Abstand und den Punkt beim Eintritt in den Bildschirm, an dem die Animation endet, und scrolle die Vorschau. Der Code steht in einem @supports, sodass die Elemente in Firefox, das das Feature noch hinter einer experimentellen Option hält, normal erscheinen statt unsichtbar zu bleiben, und er respektiert alle, die weniger Bewegung wünschen.

So geht’s

1. Wähle Effekt und Abstand.
2. Lege fest, wo die Animation endet.
3. Kopiere das CSS und wende die Klasse auf die Abschnitte an.

Wann nutzen

• Landingpages.
• Abschnitte für Leistungen und Kundenstimmen.
• Portfolios.

Häufige Fragen

Funktioniert das in allen Browsern?

Scroll-gesteuerte Animationen (animation-timeline) funktionieren in Chrome, Edge und Safari 26 oder neuer. In Firefox stehen sie noch hinter einer experimentellen Option. Deshalb steht der Code in einem @supports: Wo das Feature fehlt, erscheinen die Elemente einfach normal, ohne unsichtbar zu bleiben.

Warum keine Bibliothek wie AOS oder ScrollReveal nutzen?

Diese Bibliotheken beobachten das Scrollen mit JavaScript, was das Laden verlangsamt und auf schwachen Smartphones ruckeln kann. Mit animation-timeline übernimmt der Browser selbst die Animation und die Seite wird leichter.

Und wer weniger Bewegung bevorzugt?

Der Code beachtet prefers-reduced-motion: Für alle, die diese Option aktiviert haben, erscheinen die Elemente, ohne zu gleiten oder zu wachsen.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools