Scrolling Text

指定した間隔でテキストのリストを循環させる動的な背景コンポーネントです。

オプション

• text | (string|array<string>): 表示する文字列. Default: [].
• loop | boolean: はプロセスを無限に表示するかどうかを示します。. Default: false.
• direction | string: テキストの流れの方向 (left, right, up, down, tracking, focus, swirl のいずれか)。. Default: 'right'.
• hold | number: 滞留時間. Default: 5.
• wait | number: 新しいテキストが到着するまでの時間. Default: 3.
• inTime | number: じかんじかん. Default: 1.
• outTime | number: 終了効果時間. Default: 1.
• className | string: クラス名. Default: ''.
• style | object: テキストのCSSスタイル. Default: {}.

例としては、以下のようなものがあります。

• Minimal
• List of Texts
• Background Image

ライブエディター

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

結果

ReferenceError: Provider is not defined