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 }    反作用彈簧的配置