Text Generate
Auch genannt Text Generate Effect
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.
Einsatz
Einleitungstexte im KI-Stil
Varianten
- with blur
- without blur
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
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.Ähnliche Animationen
ABC DEFG
Typewriter (Schreibmaschineneffekt)
Auch genannt Typing Animation, Typewriter Effect, Typing Text
Die Zeichen erscheinen einzeln, als würden sie getippt, meist gefolgt von einer blinkenden Einfügemarke.
Einsatz
Hero-Headlines, Taglines
Füge bei [wo] einen Schreibmaschineneffekt (Typewriter) hinzu, auch typing animation oder typing text genannt.
Die Zeichen sollen einzeln in gleichmäßigem Tipptempo erscheinen, mit einer Einfügemarke direkt hinter dem zuletzt getippten Zeichen, die nach dem Tippen ein paar Mal blinkt.
Spiele ihn nur einmal statt in Schleife ab, lass Screenreader sofort den ganzen Text lesen und zeige bei reduzierter Bewegung (prefers-reduced-motion) gleich den vollständigen Text.ABCDEFGHIJKLMNOPQRSTUVWXYZ
Darin scrollen
Text Reveal
Auch genannt Scroll Text Reveal, Word-by-word Reveal
Die Wörter eines Absatzes gehen beim Scrollen von blass zu voller Deckkraft über.
Einsatz
Manifest- oder Einleitungsabsätze
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.ABCD
Blur In
Auch genannt Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.
Einsatz
Einblenden von Überschriften und Hero-Texten
Füge bei [wo] eine „Blur In“-Einblendanimation hinzu (auch text focus in, focus in oder blur text reveal genannt).
Der Inhalt soll stark verschwommen und transparent beginnen und dann an seinem Platz scharf werden: weich und eher langsam, ohne Bewegung.
Spiele sie nur einmal ab und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort scharf an.ABCDEF
Split Text Stagger
Auch genannt Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.
Einsatz
Headlines und Abschnittstitel
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.Mehr aus Text
ABC DEFG HIJ KL
Text Highlighter (Textmarker)
Auch genannt Highlight Marker, Marker Underline, Hero Highlight
Ein farbiges Band wie von einem Textmarker zieht sich über eine Phrase, um sie hervorzuheben.
Einsatz
Hervorheben wichtiger Phrasen
Füge bei [wo] einen Textmarker-Effekt („Text Highlighter“) hinzu, auch highlight marker oder marker underline genannt.
Ein farbiges Band wie von einem Textmarker soll sanft von links nach rechts hinter die wichtige Phrase gleiten, als würde jemand sie mit einem Stift markieren.
Spiele ihn nur einmal ab, wenn die Phrase ins Bild scrollt, halte den Text auf dem Band gut lesbar und lass das Band der Phrase korrekt folgen, wenn sie auf zwei Zeilen umbricht.ABCDABCD
Mit der Maus darüberfahren
Text Hover Effect
Auch genannt Gradient Outline Text Hover, Text Fill on Hover
Ein Wort in Umrissschrift wird von einem Verlauf gefüllt oder beleuchtet, der dem Zeiger folgt oder darüber streicht.
Einsatz
Große Display-Wörter, Footer
Füge bei [wo] einen „Text Hover Effect“ hinzu (auch text fill on hover oder gradient outline text hover genannt).
Das Wort soll zunächst nur als Umriss erscheinen; solange der Zeiger darüber ist, soll sich eine volle Füllung sanft von links nach rechts hineinschieben und beim Verlassen wieder zurückziehen.
Halte das Umrisswort vor dem Füllen gut lesbar und zeige denselben Effekt beim Tastaturfokus.Darin scrollen
Text Path Scroll
Auch genannt Text Path Curve Scroll Animation
Der Text folgt einem gekrümmten Pfad und wandert beim Scrollen daran entlang.
Einsatz
Storytelling-Abschnitte
Füge bei [wo] einen „Text Path Scroll“-Effekt hinzu (auch text path curve scroll animation genannt).
Der Text soll auf einer geschwungenen Linie sitzen und beim Scrollen daran entlanggleiten: vorwärts beim Herunterscrollen, zurück beim Hochscrollen.
Kopple die Bewegung ohne Verzögerung direkt an die Scrollposition und halte den Text für Screenreader als normalen Text lesbar.