[JavaScript]カウンタープラグイン odometer

スロットマシーンのようなカウンターを実装してくれるodometerというプラグインを発見したので使い方の勉強をした。

まずは、stylesheetの適用から。

<link rel="stylesheet" href="../odometer-0.4.6/themes/odometer-theme-default.css" />

次にscriptタグのインポートを行う。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../odometer-0.4.6/odometer.min.js"></script>

表示したい部分にdivタグを追加

<div class="hoge">99</div>

最後、objectの作成を行う。

<script>
jQuery(function($){
  window.odometerOptions = {
    auto: false
  };

  odometer = new Odometer({
    el: $('.hoge')[0],
    value:0,
    theme: 'default',
    format: 'd',
  });
  odometer.render();

  timerid = setTimeout(function(){
    odometer.update(100);
  },1000);

});
</script>

確かにアニメーションした。かっこいいなー。