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
Varianten
- along curve
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 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.Ähnliche Animationen
Motion Path
Auch genannt Animate Along Path, Offset Path Animation
Ein Element bewegt sich entlang eines eigenen gekrümmten Pfads und kann sich dabei in Laufrichtung drehen.
Einsatz
Flugzeug oder Punkt auf einer Route, dekorative Wanderelemente
Füge bei [wo] eine „Motion Path“-Animation hinzu (auch animate along path genannt).
Ein kleines Element soll langsam und gleichmäßig einer eigenen gekrümmten Route folgen und sich dabei stets in Bewegungsrichtung drehen.
Nimm eine geschlossene Route, damit die Schleife ohne Sprung wiederholt, und lass die Route mit ihrem Container mitskalieren statt in fester Größe zu bleiben.ABCDEFGHIJKLMNOP
Spinning Text
Auch genannt Circular Text, Text on Circle
Der Text ist um einen Kreis gesetzt, der sich ununterbrochen dreht.
Einsatz
Rotierende Badges und Stempel
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).A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
A B C D E F G H I J K L M N O P Q R S T A B C D E F G H I J K L M N O P Q R S T
Darin scrollen
Text Marquee on Scroll
Auch genannt Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
Große Textzeilen gleiten seitwärts, während die Seite vertikal gescrollt wird.
Einsatz
Markenbotschaften und Hero-Bereiche
Füge bei [wo] eine „Text Marquee on Scroll“ hinzu (auch scroll text marquee oder scroll velocity text genannt).
Große Textzeilen sollen beim Runterscrollen seitwärts gleiten, abwechselnde Zeilen in entgegengesetzte Richtungen, und beim Hochscrollen zurückgleiten.
Kopple die Bewegung an die Scrollposition, verhindere, dass die langen Zeilen eine horizontale Scrollbar erzeugen, und lass sie bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.Mehr aus Text
ABCABCABCABCABC
Darin scrollen
Text Repetition
Auch genannt Repeated Text Scroll
Ein Wort wird in viele gestapelte Kopien vervielfältigt, die sich beim Scrollen verschieben.
Einsatz
Portfolio-Titel
Füge bei [wo] einen „Text Repetition“-Effekt hinzu (auch repeated text scroll genannt).
Ein Wort soll in einen Stapel blasserer Umrisskopien vervielfältigt werden, die sich beim Scrollen hinter ihm auffächern und beim Hochscrollen wieder zusammenfalten.
Kopple das Auffächern direkt an die Scrollposition und verstecke die zusätzlichen Kopien vor Screenreadern, damit das Wort nur einmal vorgelesen wird.AWBXCYDZ
Text Replacement
Auch genannt Text Swap
Vorhandener Text wird animiert ausgeblendet und durch neuen Text ersetzt.
Einsatz
Wechselnde Beschriftungen
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.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.