Preloader Curtain Lift
Auch genannt Splash screen, Intro loader
Eine bildschirmfüllende Intro-Ebene mit Logo oder Zähler gleitet oder blendet weg und gibt die Website frei.
Einsatz
Erster Seitenaufruf
Varianten
- slide-up
- fade
- counter then reveal
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] einen „Preloader Curtain Lift“ hinzu (auch Splash Screen oder Intro Loader genannt).
Eine bildschirmfüllende Intro-Ebene soll stehen bleiben, während sich ein Ladebalken füllt, und dann sanft nach oben weggleiten, um die Website freizugeben, die darunter weich an ihren Platz rückt.
Spiele ihn nur beim ersten Laden ab, halte die Seite nie länger auf, als das Laden tatsächlich dauert, und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) weg.Ähnliche Animationen
A
B
Klicken
Curtain / Panel Wipe
Auch genannt Page wipe, Curtain reveal, Stripe transition, Staggered panels
Massive Paneele wischen über den Bildschirm, verdecken die alte Seite und ziehen sich dann zurück, um die neue freizugeben.
Einsatz
Navigation auf Portfolio- und Agenturseiten
Füge bei [wo] einen „Curtain / Panel Wipe“-Seitenübergang hinzu (auch Page Wipe oder Staggered Panels genannt).
Massive Paneele sollen nacheinander hereinwischen und die alte Seite verdecken, die Seite soll wechseln, während sie ganz verdeckt ist, und die Paneele sollen dann weiter aus dem Bild ziehen und die neue freigeben: kraftvoll und flüssig.
Zeige die neue Seite nie, bevor die Paneele die alte verdeckt haben, und nutze bei reduzierter Bewegung (prefers-reduced-motion) stattdessen eine einfache Überblendung.- %
Number Ticker
Auch genannt Count Up, Animated Counter, Number Counter, countUp
Eine Zahl zählt von einem Start- zu einem Zielwert hoch, sobald sie sichtbar wird.
Einsatz
Kennzahlen und KPI-Blöcke
Füge bei [wo] einen „Number Ticker“ hinzu (auch count up oder animated counter genannt).
Sobald die Zahl ins Bild kommt, soll sie von null bis zu ihrem Zielwert hochzählen, anfangs schnell und zum Ende hin sanft abbremsend.
Nutze Ziffern mit fester Breite, damit drumherum nichts zittert, zähle nur einmal und zeige Screenreadern sowie bei reduzierter Bewegung (prefers-reduced-motion) sofort den Endwert.A
Slide Out
Auch genannt Slide Out Up, Slide Out Down
Das Element gleitet über einen Containerrand hinaus und verschwindet.
Einsatz
Schließen von Drawern und Panels
Füge bei [wo] eine „Slide Out“-Ausblendanimation hinzu (auch slide out up oder slide out down genannt).
Das Element soll über seinen Containerrand hinausgleiten und verschwinden und dabei voll deckend bleiben: schnell, beim Verlassen beschleunigend.
Schneide es am Containerrand ab, entziehe es Tastatur und Screenreadern, sobald es nicht mehr sichtbar ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.Mehr aus Page Transition
A
B
Klicken
Shared Axis
Auch genannt Shared axis X/Y/Z
Aus- und eingehender Inhalt bewegen sich gemeinsam entlang der X-, Y- oder Z-Achse und blenden dabei, um ihre räumliche Beziehung zu zeigen.
Einsatz
Stepper, Navigation zwischen Geschwisterseiten, Drill-down
Füge bei [wo] einen „Shared Axis“-Seitenübergang hinzu (auch Shared Axis X/Y/Z genannt).
Beim Vorwärtsgehen soll der alte Inhalt ein kurzes Stück zur Seite gleiten und schnell ausblenden, während der neue von der anderen Seite hereingleitet und kurz danach einblendet; beim Zurückgehen kehrt sich die Richtung um.
Halte den Weg kurz, damit er die Richtung nur andeutet, und passe die Achse an die Navigation an: seitlich für Geschwisterseiten, vertikal für Schritte, Tiefe für Drill-down.BC
A
Klicken
Shared Element Transition
Auch genannt Hero transition, View Transition shared element, view-transition-name morph
Ein passendes Element, etwa ein Vorschaubild, verwandelt sich in Position und Größe von einer Seite zur nächsten.
Einsatz
Vom Vorschaubild zur Detailseite
Füge bei [wo] eine „Shared Element Transition“ hinzu (auch Hero Transition oder view-transition-name morph genannt).
Beim Wechsel zur nächsten Seite soll das passende Element, etwa ein Vorschaubild, sanft an seinen Platz auf der neuen Seite gleiten und wachsen, während der übrige Inhalt überblendet, und beim Zurückgehen wieder schrumpfen.
Gib den passenden Elementen auf beiden Seiten eine gemeinsame Identität, damit sie richtig zusammenfinden, und nutze eine einfache Überblendung, wo der Browser sie nicht verwandeln kann.A
B
Klicken
Slide Page Transition
Auch genannt Push / pop, Directional slide, Slide-over route
Die neue Seite gleitet von einer Seite herein, während die alte hinausgleitet; die Richtung folgt der Navigationstiefe.
Einsatz
Vor- und Zurück-Navigation im Mobile-Stil
Füge bei [wo] eine „Slide Page Transition“ hinzu (auch Push / Pop oder Directional Slide genannt).
Beim Vorwärtsgehen soll die neue Seite von der Seite hereinschieben, während die alte zur anderen Seite hinausgleitet; beim Zurückgehen sollen sich beide in die Gegenrichtung bewegen: weich, sanft beschleunigend und abbremsend.
Kopple die Richtung an die Navigationstiefe, auch beim Zurück-Button des Browsers, und verhindere, dass die Seite während des Gleitens seitlich scrollt.