Auch genannt Image comparison slider, Compare slider
Ein ziehbarer Trenner zeigt auf der einen Seite ein Bild und auf der anderen ein zweites.
Einsatz
Bildretusche, Produktvergleiche
Füge bei [wo] einen Vorher-Nachher-Slider (Before-After Slider) hinzu, auch image comparison slider oder compare slider genannt.
Zwei Bilder liegen übereinander, und das Ziehen eines senkrechten Trenners zeigt mehr vom einen und weniger vom anderen; der Trenner folgt dem Zeiger direkt ohne Verzögerung.
Starte mit dem Trenner in der Mitte und lass ihn per Touch und mit den Pfeiltasten bedienen.
Mit der Maus darüberfahren
Auch genannt Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Ein Bild vergrößert sich beim Hovern in seinem Rahmen und schwenkt manchmal mit dem Zeiger mit.
Einsatz
Produktkarten, Vorschaubilder
Füge bei [wo] einen „Hover Zoom“-Effekt hinzu (auch image zoom on hover oder zoom-pan genannt).
Solange der Zeiger über dem Bild ist, soll es sich langsam und weich in seinem Rahmen vergrößern, während der Rahmen seine Größe behält, und beim Verlassen sanft zurückgehen.
Schneide das Bild auf seinen Rahmen zu, damit nichts über das Layout hinausragt, und zeige denselben Zoom beim Tastaturfokus.
Auch genannt Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
Ein Bild wird freigelegt, indem eine Abdeckung schrumpft oder eine Maskenkante sich ausdehnt.
Einsatz
Redaktionelle Bilder beim Scrollen
Füge bei [wo] einen „Image Reveal Wipe“ hinzu (auch mask reveal oder clip-path reveal genannt).
Wenn das Bild ins Sichtfeld scrollt, soll eine Abdeckung von einer Seite wegwischen und es im Takt des Scrollens sanft freilegen, sodass es lange vor dem Verlassen des Bildschirms ganz offen ist.
Reserviere den Platz des Bildes, damit das Layout nicht springt, und zeige das Bild bei reduzierter Bewegung (prefers-reduced-motion) vollständig freigelegt.
Auch genannt Slow pan and zoom, Ken Burns, Kenburns
Ein Standbild zoomt und schwenkt langsam innerhalb seines Rahmens.
Einsatz
Hero-Slideshows, Hintergründe
Füge bei [wo] einen „Ken Burns Effect“ hinzu (auch slow pan and zoom genannt).
Solange ein Bild zu sehen ist, soll es sehr langsam zoomen und nur in eine Richtung wandern und dann in das nächste Bild überblenden, das sich in eine andere Richtung bewegt: ruhig und fortlaufend.
Lass jedes Bild seinen Rahmen jederzeit ganz ausfüllen, damit nie ein Rand sichtbar wird, und lass die Bilder bei reduzierter Bewegung (prefers-reduced-motion) still stehen.
Auch genannt Image zoom overlay, Medium-style zoom
Ein Vorschaubild wächst von seinem Platz aus zu einer großen, zentrierten Ansicht über einem abgedunkelten Hintergrund.
Einsatz
Bildergalerien, Artikel
Füge bei [wo] einen „Lightbox Zoom“ hinzu (auch image zoom overlay oder Medium-style zoom genannt).
Ein Klick auf ein Vorschaubild soll es sanft von seinem Platz aus zu einer großen, zentrierten Ansicht wachsen lassen, während die Seite dahinter zurücktritt; beim Schließen schrumpft es an denselben Platz zurück.
Schließe es mit Escape oder einem Klick auf den Hintergrund, setze den Fokus in die Ansicht, solange sie offen ist, und gib ihn danach an das Vorschaubild zurück.
Auch genannt Lens, Loupe, Lens (Magnifier), Hover zoom lens
Eine runde Lupe folgt dem Zeiger und zeigt einen vergrößerten Ausschnitt des Bildes.
Einsatz
Produktdetailbilder
Füge bei [wo] eine Lupe (Magnifier Lens) hinzu, auch lens oder loupe genannt.
Eine runde Linse soll ohne Verzögerung direkt unter dem Zeiger sitzen und den Bildteil darunter vergrößert zeigen.
Halte die vergrößerte Ansicht genau auf den Punkt unter dem Zeiger ausgerichtet und zeige die Lupe auf Touch-Geräten, solange der Finger auf dem Bild liegt.