Scrolling Letters

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.

Die Wörter eines Absatzes gehen beim Scrollen von blass zu voller Deckkraft über.

Füge bei [wo] einen „Text Reveal“-Effekt hinzu (auch scroll text reveal oder word-by-word reveal genannt).
Der Absatz soll blass beginnen, und beim Scrollen soll ein Wort nach dem anderen auf volle Stärke aufhellen, gekoppelt an die Scrollposition.
Beim Hochscrollen sollen die Wörter wieder verblassen, und der ganze Absatz soll unabhängig von der Abdunklung für Screenreader verfügbar bleiben.

Eine Überschrift wird in waagerechte Streifen geschnitten, die sich beim Scrollen seitlich gegeneinander verschieben.

Füge bei [wo] einen „Sliced Text“-Effekt hinzu (auch on-scroll sliced text genannt).
Eine große Überschrift soll in waagerechte Streifen geschnitten sein, die beim Scrollen seitlich gegeneinander gleiten und am Anfang zum ganzen Wort ausgerichtet sind.
Kopple die Verschiebung direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehrt, und halte die Überschrift für Screenreader als einen lesbaren Text.

Ein heller Glanz streicht immer wieder über die Buchstaben.

Füge bei [wo] einen „Shimmer Text“-Effekt hinzu (auch animated shiny text oder metallic shimmer text genannt).
Ein Lichtstreifen soll weich von links nach rechts über die Buchstaben gleiten und sich nach einer kurzen Pause wiederholen.
Halte den Text unter dem Glanz lesbar und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.

Füge bei [wo] „Spinning Text“ hinzu (auch circular text oder text on circle genannt).
Die Buchstaben sollen gleichmäßig um einen Kreis verteilt sein, der sich langsam und gleichmäßig dreht, ohne Sprung beim Neustart der Schleife.
Gib Screenreadern den Text einmal als normalen Text und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).