Before-After Slider (Vorher-Nachher-Slider)

Ein Bild wird freigelegt, indem eine Abdeckung schrumpft oder eine Maskenkante sich ausdehnt.

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.

Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.

Füge bei [wo] einen „Text Reveal Card“-Effekt hinzu (auch spotlight text reveal genannt).
Wenn der Zeiger über die Karte fährt, soll ihm eine senkrechte Kante dicht folgen und auf einer Seite verborgenen Text freilegen: weich und direkt, ohne Verzögerung.
Auf Touch-Geräten, wo es keinen Zeiger gibt, soll Ziehen oder Tippen den verborgenen Text zeigen; mach den verborgenen Text außerdem für Screenreader zugänglich.

Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.

Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.

Ein Element folgt beim Ziehen dem Zeiger und lässt sich auf einen Bereich oder eine Achse begrenzen.

Füge bei [wo] eine „Drag“-Interaktion hinzu (auch draggable oder drag constraints genannt).
Das Element soll beim Ziehen direkt dem Zeiger folgen, an den Rändern seines erlaubten Bereichs anhalten und beim Loslassen mit einem kleinen Nachfedern an seinen Ruheplatz zurückspringen.
Sorge dafür, dass es mit Touch ebenso wie mit der Maus funktioniert, ohne dass die Seite darunter scrollt, und biete eine Möglichkeit, es mit der Tastatur zu bewegen.

Ein Bild vergrößert sich beim Hovern in seinem Rahmen und schwenkt manchmal mit dem Zeiger mit.

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.

Ein Standbild zoomt und schwenkt langsam innerhalb seines Rahmens.

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.