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}}      { stiffness: 340, damping: 30 }    反作用弹簧的配置