Card Stack
Auch genannt Stacked cards, Cards effect
Karten liegen leicht versetzt übereinander, und die oberste weicht zur Seite, um die nächste freizugeben.
Einsatz
Kundenstimmen, Swipe-Stapel
Varianten
- swipe-away deck
- auto-rotating stack
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 „Card Stack“ hinzu (auch stacked cards genannt).
Staple die Karten leicht versetzt hintereinander; jeder Klick soll die oberste Karte zur Seite schwingen und hinten einreihen, während die übrigen nachrücken: weich, leicht und flott.
Mach es per Tastatur bedienbar, lass Screenreader jede Karte der Reihe nach erreichen und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.Ähnliche Animationen
A
B
C
D
Darin scrollen
Stacking Cards
Auch genannt Sticky Stacking Cards, Card Stack Scroll
Karten bleiben beim Scrollen oben kleben und stapeln sich übereinander, wobei die früheren oft kleiner werden.
Einsatz
Feature-Listen und Portfolios
Füge bei [wo] „Stacking Cards“ hinzu (auch sticky stacking cards oder card stack scroll genannt).
Beim Scrollen soll jede Karte nahe am oberen Rand kleben bleiben und die nächste darüber hochgleiten, während die Karten darunter leicht schrumpfen, sodass ein ordentlicher Stapel entsteht.
Lass von jeder früheren Karte einen schmalen Rand sichtbar und gib der letzten Karte genug Platz, um ihre Position zu erreichen, bevor der Abschnitt endet.Ziehen
Swipe to Delete
Auch genannt Swipe actions, Swipe to reveal
Wischt man eine Listenzeile zur Seite, erscheinen Aktionsbuttons wie Löschen oder Archivieren.
Einsatz
Mail-Listen, To-do-Listen
Füge bei [wo] eine „Swipe to Delete“-Interaktion hinzu (auch swipe actions oder swipe to reveal genannt).
Wird eine Zeile zur Seite gezogen, soll sie direkt dem Finger folgen und dahinter Aktionsbuttons wie Archivieren und Löschen freilegen, bis diese ganz sichtbar sind, und beim Loslassen weich ohne Nachfedern an ihren Platz gleiten.
Halte vertikales Scrollen beim horizontalen Wischen funktionsfähig und mach dieselben Aktionen ohne Wischen per Tastatur und Screenreader erreichbar.A
B
C
Klicken
Carousel Slide
Auch genannt Slider, Swipe carousel, Scroll-snap carousel
Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.
Einsatz
Hero-Banner, Produktgalerien
Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.Mehr aus 3D & Depth
ABCDE
Ziehen
Coverflow
Auch genannt Cover flow carousel
Das mittlere Element zeigt nach vorn, während die seitlichen perspektivisch weggedreht sind.
Einsatz
Album- und Medienkarussells
Füge bei [wo] ein „Coverflow“-Karussell hinzu (auch cover flow carousel genannt).
Das mittlere Element soll nach vorn zeigen, während die Elemente an den Seiten perspektivisch wegdrehen; seitliches Ziehen verschiebt die Reihe, und beim Loslassen rastet sie sanft beim nächsten Element ein.
Unterstütze neben dem Ziehen auch Pfeiltasten und Wischen, und lass das vertikale Scrollen der Seite auf Touch-Geräten funktionieren.ABCD
Klicken
Cube Rotate
Auch genannt 3D cube, Cube transition
Die Inhalte liegen auf den Seiten eines Würfels, der sich dreht, um die nächste Seite zu zeigen.
Einsatz
Slider-Übergänge, Feature-Umschalter
Füge bei [wo] einen „Cube Rotate“-Übergang hinzu (auch 3D cube oder cube transition genannt).
Lege die Inhalte auf die Seitenflächen eines perspektivisch gesehenen Würfels; jeder Klick auf Weiter soll den Würfel sanft um seine senkrechte Achse drehen und die nächste Seite nach vorn holen.
Lass nur die vordere Seite für Tastatur und Screenreader erreichbar und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.A
Zeiger hier bewegen
Glare / Holographic Card
Auch genannt Glare hover, Glare card, Magic card, Glare
Ein heller Glanzpunkt folgt dem Zeiger wie eine Spiegelung über die Kartenoberfläche.
Einsatz
Premium- oder Sammelkarten
Füge bei [wo] einen „Glare / Holographic Card“-Effekt hinzu (auch glare card oder glare hover genannt).
Ein weicher, heller Glanzpunkt soll dem Zeiger über die Kartenoberfläche folgen wie Licht, das sich darauf spiegelt, während sich die Karte leicht zum Zeiger neigt; beim Verlassen blendet beides aus: weich und dezent.
Lass Klicks durch die Glanzebene hindurch, halte den Inhalt darunter lesbar und zeige die Karte auf Touch-Geräten ohne Glanz.