Scrolling Text

Een dynamische achtergrondcomponent die met een bepaald interval door een lijst van teksten heenloopt.

Opties

• text | (string|array<string>): tekst of lijst van teksten die moeten worden weergegeven. Default: [].
• loop | boolean: geeft aan of het proces oneindig moet worden weergegeven. Default: false.
• direction | string: de richting van de tekststroom (ofwel left, right, up, down, tracking, focus, of swirl). Default: 'right'.
• hold | number: de tijd dat de tekst stil blijft staan (in seconden). Default: 5.
• wait | number: de tijd voordat een nieuwe tekst aankomt (in seconden). Default: 3.
• inTime | number: tijd van het ingangseffect (in seconden). Default: 1.
• outTime | number: tijd van het uitgangseffect (in seconden). Default: 1.
• className | string: klassennaam. Default: ''.
• style | object: CSS-stijlen van de tekst. Default: {}.

Voorbeelden

• Minimal
• List of Texts
• Background Image

Live redacteur

<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
/>

Resultaat

ReferenceError: Provider is not defined