Carousel Slide

Die Slides bleiben an ihrem Platz und blenden ineinander über, statt zu gleiten.

Füge bei [wo] einen „Carousel Crossfade“ hinzu (auch fade slideshow oder carousel fade genannt).
Die Slides sollen an ihrem Platz bleiben und langsam ineinander überblenden – die alte blendet aus, während die nächste gleichzeitig einblendet – und dann ein paar Sekunden stehen bleiben bis zum nächsten Wechsel.
Springe nahtlos zurück zur ersten Slide, pausiere bei Hover oder Fokus und wechsle bei reduzierter Bewegung (prefers-reduced-motion) nicht automatisch weiter.

Das mittlere Element zeigt nach vorn, während die seitlichen perspektivisch weggedreht sind.

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.

Das Scrollen rastet an festgelegten Punkten wie Slides oder Abschnitten ein.

Füge bei [wo] „Scroll Snap“ hinzu (auch scroll snapping oder snap scrolling genannt).
Wenn das Scrollen endet, soll die Ansicht sauber am nächsten Abschnitt einrasten, sodass jeder bündig am Rand steht statt auf halbem Weg stehen zu bleiben.
Nutze das native Einrasten des Browsers, damit Mausrad, Touch und Tastatur weiter funktionieren, und sorg dafür, dass Inhalte, die höher als die Ansicht sind, vollständig lesbar bleiben.

Die neue Seite gleitet von einer Seite herein, während die alte hinausgleitet; die Richtung folgt der Navigationstiefe.

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.

Eine Karte wächst zur vollständigen Detailansicht, wobei ein einziger sichtbarer Container seine Form ändert und neue Inhalte zeigt.

Füge bei [wo] einen „Container Transform“-Übergang hinzu (auch card expand to detail oder expandable card genannt).
Wenn die Karte geöffnet wird, soll derselbe Container weich zur vollständigen Detailansicht wachsen: Der alte Inhalt blendet schnell aus, und der neue blendet ein, wenn das Wachsen fast fertig ist; beim Schließen läuft es rückwärts.
Halte es als einen durchgehenden Container statt einer Überblendung zwischen zwei getrennten Boxen, und setz den Fokus beim Öffnen in die Detailansicht.

Beim Ziehen eines Eintrags gleiten die anderen aus dem Weg und ordnen sich in der neuen Reihenfolge ein.

Füge bei [wo] eine „Drag-to-Reorder List“ hinzu (auch sortable list genannt).
Der gezogene Eintrag soll dem Zeiger direkt folgen und sich leicht abheben, während die anderen Einträge weich aus dem Weg gleiten; beim Loslassen soll er schnell in den nächstgelegenen Platz einrasten.
Unterstütze Touch ebenso wie Maus, und biete eine Möglichkeit, Einträge per Tastatur zu verschieben, wobei die neue Position für Screenreader angesagt wird.

Ein Seitenpanel gleitet vom linken, rechten oder oberen Rand herein und schiebt oder überdeckt den Inhalt.

Füge bei [wo] einen „Drawer Slide“ hinzu (auch off-canvas oder side sheet genannt).
Das Panel soll vom seitlichen Rand über den Inhalt hereingleiten, während die Seite dahinter abdunkelt, schnell und weich abbremsend, und beim Schließen auf demselben Weg wieder hinausgleiten.
Halte den Tastaturfokus im offenen Drawer, schließ ihn mit Escape oder einem Klick auf den abgedunkelten Bereich und gib den Fokus an den Button zurück, der ihn geöffnet hat.