Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に
単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることで
ユニークな見た目でのインパクトある演出で数字を印象づけることができます。
そんな数値のカウントアップアニメーションを
jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。
jQueryで数字をカウントアップしながら表示する方法
「jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示
Webページ上に配置された数字がページロードと共にカウントアップされ
設定した数値で最終的に止まって表示されます。
数字は開始番号と最終的に表示する値までを指定し、カウントアップアニメーションします。
アニメーションするスピードも設定可能です。
全体構成についてまずはHTMLから。
◆HTML <p class="count" data-num="100">0</p>
実装させるタグはブロック要素とインライン要素のどちらでも可能です。
タグ自体に動作を実装させることも可能ですが、
サンプルではクラス「.count」をつけたものに実装する構成にしています。
実装するタグの中身に開始番号を指定し、
「data-num」属性を使って最終的に止まって表示する数値を指定します。
このサンプルの場合は、
「0」から「100」までカウントアップアニメーションします。
タグで囲われた開始の数字を「50」といった値にすることで、
「50」から「100」までのカウントアップアニメーションを実装することができます。
このサンプルではCSSの指定は特に動作に影響しないので割愛しますが、
フォントの種類やサイズ等をCSSで調整することで
見た目を装飾させることができます。
そして実際のカウントアップアニメーション動作スクリプトは
以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var countElm = $('.count'),
countSpeed = 10;
countElm.each(function(){
var self = $(this),
countMax = self.attr('data-num'),
thisCount = self.text(),
countTimer;
function timer(){
countTimer = setInterval(function(){
var countNext = thisCount++;
self.text(countNext);
if(countNext == countMax){
clearInterval(countTimer);
}
},countSpeed);
}
timer();
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| countElm = $(‘.count’) | カウントアップ動作させる要素 |
|---|---|
| countSpeed = 10 | カウントアップするスピード |
「countElm」が動作対象の要素の指定になり、
CSSクラスやIDまたはタグ自体を指定させることができます。
「countSpeed」は数値が一つ加算される際のスピードになり、
この値を小さくすればアニメーションは速くなり、大きくするとゆっくりになります。
スクリプト構成はタグで囲われた数値を取得して、
その値に「1」を足した値に書き換え続け、
「data-num」属性に指定された数値に到達した時点で
アニメーションをストップさせています。
画像を使わないシステムフォントで構成しているので
GoogleフォントなどのWebフォントを使用することで
簡単に飾り気のあるフォントでカウントアップの動作を実装させることも可能になります。
「GoogleFontパターン：jQueryで数字をカウントアップしながら表示する方法」サンプルを別枠で表示
以上が数字をカウントアップさせるアニメーションで表示する方法でした。
注目させたい数字や、ランキング発表をする際の演出など、
とても目を引くアニメーションをつけることができるかと思います。
jQueryで数字にカウントアップアニメーションをつける際に是非。。