![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
数字をカウントアップするjQueryプラグイン「jquery.counterup」
MARKLEAPS
企業のサイトなどで見かける、
設立0000年！ 売上数 0000件！ シェア00％！
のように数字をカウントアップするアニメーションをjQueryで実現する方法をご紹介します。
jQueryプラグインのダウンロード
GitHub からzipファイルをダウンロードします。
jquery.counterup-master.zip を解凍し、その中のjquery.counterup.min.jsを使用します。
jQueryプラグインの読み込み
以下を<head>内に読み込みます。
|
1 2 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> |
js/ はjquery.counterup.min.jsのアップ先ディレクトリに応じて書き変えてください。
指定の数字をカウントアップさせる
カウントアップさせたい数字を以下のように囲みます。
・html
|
1 |
<span class="count">1000</span> |
カウントアップさせるための命令を<head>内に記述します。
|
1 2 3 4 5 6 7 8 |
<script> jQuery(document).ready(function($){ $('.count').counterUp({ delay: 10, //開始までの遅延 time: 1000 //カウントアップ終了までの時間 }); }); </script> |
