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

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

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

 

今回は、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でフォント指定したり、見た目を整えてください。

 

サンプル

サンプルを作成してみました。アイコンが全部同じなのはさておき、3つ並べてみました。

コチラ

まとめ

今回は数字をカウントしながら表示させるという動きについてご紹介しました。

採用サイトは学生がターゲットなので、シンプルな内容でもこうした動きをつけることで興味を惹くことができるかと思います。採用サイト以外でも、数字で会社の実績などをアピールする時に使えそうです。ぜひ、参考にしてみてください。