Auch genannt Fade slideshow, Carousel fade
Die Slides bleiben an ihrem Platz und blenden ineinander über, statt zu gleiten.
Einsatz
Hero-Slideshows, Kundenstimmen
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.
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.
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.