Mask Reveal

Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.

Füge bei [wo] einen „Split Text Stagger“-Einstieg hinzu (auch letter stagger oder staggered text reveal genannt).
Zerlege die Überschrift in Buchstaben, die mit kurzer Verzögerung nacheinander nach oben gleiten und einblenden, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn die Überschrift ins Bild kommt, sorge dafür, dass Screenreader sie als ein Wort lesen, und zeige sie bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation.

Ein clip-path oder eine Maske wächst von einem Rand oder Punkt aus und legt Bild oder Text nach und nach frei.

Füge bei [wo] einen „Clip Reveal“-Einblendeffekt hinzu (auch mask reveal, wipe reveal oder image reveal genannt).
Eine Schnittkante soll von links nach rechts darüberstreichen und den Inhalt nach und nach freilegen, während er selbst stillsteht: gleichmäßig, mit weichem Anfang und Ende.
Reserviere den Platz des Elements von Anfang an, damit sich nichts verschiebt, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) vollständig freigelegt an.

Ein Wort im Satz wird per Gleiten, Drehen oder Überblenden durch das nächste Wort einer Liste ersetzt.

Füge bei [wo] einen „Word Rotate“-Effekt hinzu (auch rotating words oder flip words genannt).
Ein Wort in der Zeile soll nach oben hinausgleiten, während das nächste Wort aus einer Liste von unten hereinkommt, mit einer Pause auf jedem Wort vor dem nächsten Wechsel.
Verhindere, dass der Rest der Zeile bei unterschiedlich breiten Wörtern springt, lass Screenreader nicht jeden Wechsel ansagen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).

Vorhandener Text wird animiert ausgeblendet und durch neuen Text ersetzt.

Füge bei [wo] einen „Text Replacement“-Effekt hinzu (auch text swap genannt).
Wenn sich der Text ändert, sollen die alten Zeichen nach oben hinausgleiten und die neuen von unten hereinkommen, Zeichen für Zeichen in einer schnellen, weichen Welle.
Verhindere, dass die Textbox beim Wechsel in der Größe springt, und lass Screenreader nur den neuen Text ansagen.

Grüne Zeichen fallen in Spalten herab wie der Code-Regen aus Matrix.

Füge bei [wo] einen „Matrix Text“-Effekt hinzu (auch digital rain text genannt).
Zeichenspalten sollen gleichmäßig mit leicht unterschiedlichen Geschwindigkeiten herabfallen, jede mit einem hellen vorderen Zeichen und einem Schweif, der dahinter verblasst.
Behandle ihn als Dekoration, die vor Screenreadern verborgen ist, halte ihn leichtgewichtig und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Die Buchstaben tropfen und ziehen sich nach unten, als würden sie schmelzen.

Füge bei [wo] einen „Melting Text“-Effekt hinzu.
Die Buchstaben sollen langsam nach unten sacken, während sich darunter Tropfen in die Länge ziehen, als würden sie schmelzen, und dann in einem ruhigen, geschmolzenen Zustand stehen bleiben.
Spiele ihn einmal ab, wenn der Text ins Bild kommt, halte das Wort am Ende lesbar und verzichte bei reduzierter Bewegung (prefers-reduced-motion) auf die Animation.

Ein Wort verschwimmt an derselben Stelle und geht fließend ins nächste über.

Füge bei [wo] einen „Morphing Text“-Effekt hinzu (auch text morph genannt).
Ein Wort soll an derselben Stelle verschwimmen und mit einem weichen, zähflüssigen Übergang ins nächste verschmelzen und dann kurz stillstehen, bevor der nächste Wechsel kommt.
Wechsle die Wörter nahtlos durch, lass Screenreader die Wörter als normalen Text lesen und stoppe den Wechsel bei reduzierter Bewegung (prefers-reduced-motion).