react-text-loop 文字滚动

网址：https://www.npmjs.com/package/react-text-loop

npm install react-text-loop or yarn add react-text-loop

import React, { Component } from 'react';

import TextLoop from "react-text-loop";

class App extends Component {

  state = {  }

  render() { 

    return ( 

      <div>

        <h2>

          <TextLoop springConfig={{stiffness:340,damping:30}} mask={true} fade={true} adjustingSpeed={150} delay={2000} interval={[2000,2000,2000]}>

            <span>111111111111111111</span>

            <span>222222222222222222</span>

            <span>333333333333333333</span>

          </TextLoop>

        </h2>

      </div>

     );

  }

}

 

export default App;

• interval   number | array  更改的频率（以毫秒为单位）
• delay      number             动画延迟
• adjustingSpeed   number    容器调整到下一个单词的速度（以毫秒为单位）。通常，您不需要更改此设置。
• fade       boolean             淡出淡入开关
• mask     boolean             在动画内容的边框周围遮罩动
• springConfig springConfig={{stiffness:340,damping:8}}      反作用弹簧的配置