Scrolling Text

Eine dynamische Hintergrundkomponente, die in einem festgelegten Intervall eine Liste von Texten durchläuft.

Optionen

• text | (string|array<string>): Text oder Liste von Texten, die angezeigt werden sollen. Default: [].
• loop | boolean: gibt an, ob der Prozess unendlich angezeigt werden soll. Default: false.
• direction | string: die Richtung des Textflusses (entweder left, right, top, bottom, verfolgen, fokussieren oder wirbeln). Default: 'right'.
• hold | number: die Zeit, die der Text stillsteht (in Sekunden). Default: 5.
• wait | number: die Zeit bis zum Eintreffen eines neuen Textes (in Sekunden). Default: 3.
• inTime | number: Zeit des Eintrittseffekts (in Sekunden). Default: 1.
• outTime | number: Zeit des Ausgangseffekts (in Sekunden). Default: 1.
• className | string: Klassenname. Default: ''.
• style | object: CSS-Stile des Textes. Default: {}.

Beispiele

• Minimal
• List of Texts
• Background Image

Live-Editor

<ScrollingText text="This is a text re-appearing every five seconds" style={{ fontSize: 44, color: 'blue' }} wait={5} hold={2} loop />

<ScrollingText
    text="This is a text re-appearing every five seconds"
    style={{ fontSize: 44, color: 'blue' }}
    wait={5}
    hold={2}
    loop
/>

Ergebnis

ReferenceError: Provider is not defined