[jQuery] 数値をパラパラとカウントアップ／ダウンさせたい

公開日:2018/11/03

やりたいこと

コンテンツに具体性と説得力を持たせるには、何はなくとも数値情報が大切です
その肝心の数値情報をユーザーの目に止まりやすくするための仕掛けとして、数値をカウントアップ、カウントダウンをするという手法があります
数値をパラパラと動かして「どんな値なんだろう」と気にかけてもらおうという魂胆です

サンプルコード

html

<p class="count_num" data-start="0" data-end="100">カウントアップ</p>

<p class="count_num" data-start="100" data-end="0">カウントダウン</p>

jQuery

jQuery(function($) {
    $(window).scroll(function() {
        var disp_pos = $(this).scrollTop() + ( $(window).innerHeight() / 2 );
        $('.count_num').each(function() {
            var obj_offset_top = $(this).offset().top;
            if( obj_offset_top < disp_pos ) {
                var target = $(this);
                var startNum = target.attr('data-start');
                var endNum = target.attr('data-end');
                if( startNum != endNum ) {
                    var countNum = startNum;
                    var timerFunc = setInterval(function() {
                        if( startNum < endNum ) {
                            countNum++;
                        }
                        else {
                            countNum--;
                        }
                        target.text(countNum);
                        if( countNum == endNum ) {
                            clearInterval(timerFunc);
                            target.attr('data-start', endNum);
                        }
                    }, 10 );
                }
            }
        });
    });
});

仕組み、解説、補足など

「count_num」クラスを指定された要素がウィンドウの中央に来るまでページスクロールされると、カウントを開始します
「data-start」属性に指定した値が「data-end」属性に指定した値になるようカウントアップ、カウントダウンします

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。