【JavaScript】パラパラパラっと数字がカウントアップするアニメーションを実装するODOMETERの使い方

古い車の走行距離計やスロットマシーンのような動きで数字を表示するオドメーターの設置方法です。

1234

ODOMETER  

この記事の目次

  1. データのダウンロード
  2. 設定方法
  3. HTMLマークアップ

データのダウンロード

データはGithubで公開されているのでダウンロードして解凍します。

Github  

設定方法

以下のコードをhead内に貼り付ける

階層は使用するサイトに合わせてください。

<link rel="stylesheet" href="odometer-theme-car.css" />
<script src="odometer.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

CSS

CSSはいくつかテーマが用意されていて、参照するCSSを変更するだけで簡単に見た目を変えられます。
もちろん自分で編集することも可能です。
CSSのテーマはこちらで確認できます。

Theme file  

jQuery

jQueryは解凍したデモファイルにも記載されているバージョンで良いのですが、2.xや3.xでも大丈夫です。

HTMLマークアップ

HTML

動かしたい数字の初期値とクラスを設定します。
用意されているCSSテーマを使用する場合はodometerを使っておきましょう。

<p class="odometer">1234</p>

JavaScript

下記JavaScriptはheadよりfooterに入れましょう。
最終的に表示させたい数字をhtml()の部分に入力します。

<script>
 setTimeout(function(){
$('.odometer').html(2020);
 }, 1000);
</script>

3桁区切りのカンマについて

デフォルトでは3桁ごとにカンマが入っていますが、
下記のコードを入れるとカンマが無くなります。

<script>
window.odometerOptions = {
 format: '(ddd).dd'
};
</script>

© GOKAN DESIGN STUDIO