簡単！数字のカウントアップ表示で動きのあるサイトに

2019年4月22日2024年3月6日

数字をカウントしながら表示させる

今回は、jQueryの簡単な記述で、「数字をカウントしながら表示させる」という動きについて紹介したいと思います。

よく採用サイトの数字で見る系のページで使われたりしているアレです！

今回はこちらのブログを参考にさせていただきました。

jQueryで数字をカウントアップしながら表示する方法

やり方

1 HTMLに下記を記述

<p class="count" data-num="1300">1200</p><span>名</span>

・<p></p>タグの中に入れた数字からカウントがスタートします。

・data-num属性は、どこまでカウントさせたいさせいかを入力します。

今回のサンプルだと1200から1300までカウントします。

2 jQueryを記述

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>//count up
$(function(){
    var countElm = $('.count'),
    countSpeed = 5;
 
    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>

・var countElm = $(‘.count’)で、動かしたい要素を指定しますので、動かしたい要素にはここに入れたclass名を付与します。

・その下のcountSpeedではカウントする際の動きの速さを指定できます。数値は小さいほど速くなります。

動き自体は上記記述するだけで完了です。

あとは、CSSでフォント指定したり、見た目を整えてください。