Text Reveal

Die Wörter blenden beim Laden der Seite nacheinander ein, oft während sich eine Unschärfe auflöst, als würden sie gerade generiert.

Füge bei [wo] einen „Text Generate“-Effekt hinzu.
Die Wörter sollen nacheinander einblenden, während sich bei jedem eine weiche Unschärfe auflöst, als würde der Text gerade generiert: gleichmäßig und ruhig.
Spiele ihn beim Laden nur einmal ab, lass Screenreader sofort den ganzen Text lesen und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.

Der Text bleibt fixiert, während seine Zeilen mit dem Scrollfortschritt ein- und ausblenden.

Füge bei [wo] einen „Sticky Text Fade“-Effekt hinzu (auch sticky scroll text opacity fade genannt).
Während der Abschnitt scrollt, soll der Textblock fixiert bleiben und seine Zeilen sollen nacheinander mit dem Scrollfortschritt ein- und ausblenden.
Kopple die Überblendungen direkt an die Scrollposition, damit sie sich beim Zurückscrollen umkehren, und halte jede Zeile unabhängig von ihrer Deckkraft für Screenreader verfügbar.

Der Fortschritt der Animation hängt direkt an der Scrollposition, sodass Vor- und Zurückscrollen sie abspielt oder zurückspult.

Füge bei [wo] eine „Scroll-Linked Animation“ hinzu (auch scroll-driven animation oder scroll scrub genannt).
Die Animation soll exakt der Scrollposition folgen: Runterscrollen spielt sie vorwärts ab, Hochscrollen spult sie sofort zurück, ohne eigenes zeitbasiertes Easing.
Lege die ganze Animation auf einen klaren Scrollbereich und zeige bei reduzierter Bewegung (prefers-reduced-motion) einen sinnvollen statischen Zustand.

Die Buchstaben eines Titels wechseln oder bewegen sich nacheinander, während man durch die Abschnitte scrollt.

Füge bei [wo] „Scrolling Letters“ hinzu (auch on-scroll letter animations genannt).
Während man durch die Abschnitte scrollt, sollen die Buchstaben des Titels nacheinander von links nach rechts zum nächsten Zeichen weiterrollen, direkt an die Scrollposition gekoppelt.
Beim Zurückscrollen sollen sie zurückrollen, und Screenreader sollen den aktuellen Titel als normalen Text erhalten.

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.

Der Text wird durch zufällige Zeichen ersetzt, die wechseln und sich nach und nach zum endgültigen Wort auflösen.

Füge bei [wo] einen „Text Scramble“-Hover-Effekt hinzu (auch text decode oder encrypted text genannt).
Wenn der Zeiger über den Text fährt, soll jeder Buchstabe schnell durch zufällige Zeichen flackern und auf seinem echten Buchstaben landen, einer nach dem anderen von links nach rechts.
Verhindere, dass die Textbreite beim Durchmischen springt, lass Screenreader den echten Text lesen und zeige denselben Effekt beim Tastaturfokus.

Der Text neigt sich in 3D-Perspektive und folgt dabei der Mausposition.

Füge bei [wo] einen „Text Tilt“-Effekt hinzu (auch perspective text tilt genannt).
Der Text soll sich sanft in 3D zum Zeiger neigen, ihm beim Bewegen weich folgen und beim Verlassen sanft wieder flach werden.
Halte die Neigung dezent, damit der Text lesbar bleibt, und lass ihn auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) flach.