jquery輕量級數字動畫插件jquery.countup.js


插件描述: jquery.countup.js 是一款輕量級jquery數字動畫插件。該數字動畫插件可以在頁面滾動時,將指定的數字從0開始計數增加動畫。

插件說明

 jquery.countup.js 是一款輕量級jquery數字動畫插件。該數字動畫插件可以在頁面滾動時,將指定的數字從0開始計數增加動畫。

該數字動畫插件可以控制動畫的延遲時間和動畫過渡時間。它依賴於 Waypoints 插件來監聽滾動事件。

安裝

可以通過npm或bower來安裝 jquery.countup.js插 件。

1 npm install jquery.countup.js
2 bower install jquery.countup.js

使用方法

在頁面引入 jquery,jquery.waypoints.min.js 和 jquery.countup.min.js 文件。

1 <script src="jquery.min.js"></script>
2 <script src="jquery.waypoints.min.js"></script>
3 <script src="jquery.countup.min.js"></script>

HTML結構

使用<span>元素作為數字的容器。

1 <span class="counter">1,498,547.00</span>
2 <span class="counter">7.99</span>
3 <span class="counter">1455455</span>

你也可以使用 data-counter-time 和 data-counter-delay 屬性來設置數字動畫的動畫時間和延遲時間。

1 <span class="counter" data-counter-time="5000" data-counter-delay="50">1981</span>
2 <span class="counter" data-counter-time="100" data-counter-delay="20">9842</span>

初始化插件

在頁面DOM元素加載完畢之后,可以通過countUp()方法來初始化數字動畫。

1 $('.counter').countUp();

也可以在初始化的時候傳入配置參數。

1 $('.counter').countUp({
2     delay: 10,
3     time: 2000
4 });
  • delay:每個數字動畫的延遲時間,單位毫秒。

  • time:計數動畫總的持續時間。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM