すぐ使える！数値をカウントアップさせる関数【jQuery】--TamoTech--

Webページに数値データ（会社の売り上げ，社員数，アンケート結果等）を表示する時に，ただ数値を載せるだけでは，あまり注目されないことが多いと思います．自分が一番注目して欲しいデータは，何かしらの強調表現を付け加えなければいけません！強調方法は，デザインで補ったり，アニメーションをつけて補ったりします．今回は，数値をカウントアップさせ，Webページに動きをつける関数をjQueryで作成します．この関数は，初期値，終了値，アニメーション時間，イージング，要素を指定して使えるようにしています．ぜひコピペで使ってみてください！

デモページはこちらから閲覧できます．

jQuery（javascript）

では早速，数値をカウントアップさせる関数を見ていきましょう！

function countUp (start, stop, duration, easing, element){
    $({percent: start}).animate({percent: stop},{
        duration : duration,
        easing : easing,
        progress : function(){
            element.text(Math.round(this.percent));
            console.log(Math.round(this.percent));
        }
    });
}

関数名は「countUp」関数です．引数には５つの値をとります．

第１引数	start	初期値	Number
第２引数	stop	終了値	Number
第３引数	duration	アニメーション時間	Number
第４引数	easing	イージングの種類	String
第５引数	element	カウントアップさせたい要素	jQueryオブジェクト

イージングとは，アニメーションを行う上での加減速を設定するプロパティです．jQueryにはイージングがいくつか用意されています．自分の思うイージングの種類を使ってください．イージングの種類は下記サイトで閲覧可能です．

jQuery日本語リファレンス　Easing/jQuery
http://semooh.jp/jquery/cont/doc/easing/

countUp関数を使ってみる

ではこの関数を実際に使ってみます．

HTML

<div class="counter">
    <div class="inner">
        <span class="count_number" id="count1">0</span><span class="unit">%</span>
    </div>
    <div class="inner">
        <span class="count_number" id="count2">40</span><span class="unit">円</span>
    </div>
    <div class="inner">
        <span class="count_number" id="count3">5</span><span class="unit">人</span>
    </div>
    <input type="button" id="start" value="count up">
</div>

レイアウトを整えるために、「div」を使っていますが、特に指定はありません。どのタグを使っても動作します。classやidを使って指定するので、そこまで気にしなくても大丈夫です。今回は「span」タグを使っています。この要素の中には、カウントアップさせたい数字の初期値をあらかじめ入れといてください。

jQuery(JavaScript)

$('#start').on('click',function(){
    let $count1 = $('#count1'),
        $count2 = $('#count2'),
        $count3 = $('#count3'),
        easing = ['easeOutQuart','easeOutQuad','easeInCubic'];
    countUp(0, 100, 2000, easing[0], $count1);
    countUp(40, 900, 4000, easing[1], $count2);
    countUp(5, 75, 3000, easing[2], $count3);      
})

function countUp (start, stop, duration, easing, element){
    $({percent: start}).animate({percent: stop},{
        duration : duration,
        easing : easing,
        progress : function(){
            element.text(Math.round(this.percent));
            console.log(Math.round(this.percent));
        }
    });
}

「id=start」の「button」要素が押されたら，カウントアップさせるようにしています．カウントアップさせたい要素と，イージングの文字列を変数に格納してから，関数に入れています．今回は3つの要素を一つのボタンで同時にカウントアップさせます．

今回はCSSの説明は省きます．CSSは特に必要ではないので，ご自身でご自由にデザインしてみてください．

サンプルページはこちらからも閲覧できます．

サンプルページのソースコードはこちらからダウンロード可能です．