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

  • LINEで送る
カウントアップ,jQuery

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」関数です.引数には5つの値をとります.

第1引数start初期値Number
第2引数stop終了値Number
第3引数durationアニメーション時間Number
第4引数easingイージングの種類String
第5引数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は特に必要ではないので,ご自身でご自由にデザインしてみてください.

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

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

SNSでもご購読できます。

コメントを残す

*