jQueryで数字のカウントが上がるアニメーションを作成する方法

ルーレットのようにカウントが上がるアニメーション

最近、コーポレートサイトやプロダクトサイトで見かけるカウントアップのアニメーション。サイトの構築実績数やダウンロード数など、「この数字見て！」感出しまくりのドラムロール的効果はカッコイイなと思い、作ってみることに。setInterval()やなどでやるのかと思っていたら、さすがjQuery。jQUeryのanimateメソッドで簡単に実装できる方法があるようなので、プラグインを作ろうと思います。

HTMLを準備

まずはHTMLを準備。トリガーはとりあえずクリックにしておいて、指定した要素内のテキストを書き換える方式でいきます。

<span id="counter">0</span>
<input type="button" id="start" value="START">

ボタンにもID要素を忘れずに。

animateのproperties指定でカウントアップ

animateメソッドの第一引数には、propertiesを渡すのですが、TypeはPlainObjectで、一般的にはCSSを渡して指定要素（自分自身、いわゆるthis）のCSSの初期値からanimateで指定したCSSの値まで変化させるのですが、PlainObjectを直接jQueryのオブジェクトとして指定アニメーションさせるという方法をはじめて知った。

$({count: 0}).animate({
  count: 100
},{
  easing: 'swing',
  duration: 1000,
  step: function() {
    // カウントを表示する場所を指定 this.count
  }
});

1行目の$({count: 0})がポイント。countというプロパティを設定して、値を「0」とします。そして、animateメソッドの第一引数でcountプロパティの値を「100」とすることで、0から100までカウントアップしてくれます。素晴らしい。

これをプラグイン化するにあたって、開始の値と終了の値、easingやduration（開始から終了までの時間：ミリ秒）の値をプラグインの引数と渡せるようにしてあげればいい感じになりそう (^o^)

プラグイン化してアニメーションや速さを変えられるように設定

jQueryプラグインの作り方をベースに処理をプラグイン化。

;(function($){
  $.fn.counter = function(options){
    var defaults = {
      'start': 0,
      'end': 0,
      'easing': 'swing',
      'duration': 400
    };
    var settings = $.extend( {}, defaults, options );

    return this.each(function(){
      var self = $(this);

      $({count: settings.start}).animate({
        count: settings.end
      },{
        easing: settings.easing,
        duration: settings.duration,
        step: function() {
          self.text(Math.ceil(this.count));
        }
      });
    });
  };
}(jQuery));

12行目でカウントアップする要素を変数に保存しておきます。20行目でthis.countの値をMath.ceilで切り上げして、カウントの値をtextに渡しています。このプラグイン化した処理を実際にコールしてみます。

$(function(){
  $('#start').on('click', function(){
    $('#counter').counter({
      'start': 0,
      'end': 1000,
      'easing': 'swing',
      'duration': 1500
    });
  });
});

これを動かしてみると……

できた！＼(^o^)／
gifアニメ画像なのでカクカク動いていますが、実際は滑らかに動いてくれました。これをスクロールでトリガーにしてあげたりすると、要素が表示されるいちまできたらカウントアップなんていう演出ができますね。jQueryは偉大だ。