Text Repetition
Auch genannt Repeated Text Scroll
Ein Wort wird in viele gestapelte Kopien vervielfältigt, die sich beim Scrollen verschieben.
Einsatz
Portfolio-Titel
Varianten
- scroll-driven repeats
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 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.Ähnliche Animationen
ABCDEFABCDEF
Line Shadow Text
Auch genannt Text Shadow Animation, Dancing Shadow
Ein gestreifter oder versetzter Schatten hinter den Buchstaben bewegt sich in eine Richtung.
Einsatz
Kräftige Display-Überschriften
Füge bei [wo] einen „Line Shadow Text“-Effekt hinzu (auch text shadow animation oder dancing shadow genannt).
Hinter den Buchstaben soll ein versetzter Schatten aus dünnen diagonalen Streifen langsam und stetig gleiten, während die Buchstaben selbst ruhig und scharf bleiben.
Lass die Streifenbewegung nahtlos loopen und den Schatten bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.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.ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography
Auch genannt Kinetic Text
Text skaliert, bewegt oder dreht sich als bewegtes Grafikelement statt als statischer Fließtext.
Einsatz
Marken-Hero-Bereiche
Füge bei [wo] „Kinetic Typography“ hinzu (auch kinetic text genannt).
Zeilen aus großem, wiederholtem Text sollen langsam und gleichmäßig abwechselnd in entgegengesetzte Richtungen seitwärts gleiten und die Wörter so zu einer bewegten Grafik machen.
Lass jede Zeile nahtlos ohne sichtbaren Sprung laufen, sorg dafür, dass Screenreader den Text nur einmal vorlesen, und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).Mehr aus Text
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.ABCDEFGHIJKL
Zeiger hier bewegen
Text Reveal Card
Auch genannt Spotlight Text Reveal
Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.
Einsatz
Feature-Karten
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.