[JS]数字や文字をクルマの走行距離計のようにぐるぐる回転させて表示するスクリプト -Odometer

数字をそのまま表示しておくのもいいですが、よりユーザーの目を引きつけるようにぐるぐると回転させて表示するスクリプトを紹介します。

Odometer
Odometer -GitHub

• Odometerのデモ
• Odometerの使い方

Odometerのデモ

デモはIE8+, FF4+, Safari 6+, Chromeでご覧ください。

デモページ

数字だけでなく、文字もぐるぐる回転することができます。

指定した文字でぐるぐる

計算結果もぐるぐる

Odometerではさまざまなテーマファイルがスタイルシートで用意されています。

テーマファイル「car」

テーマファイル「digital」

テーマファイル「slot」

テーマファイル「train」

Odometerの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。
スタイルシートはさまざまなテーマが用意されています。

<link rel="stylesheet" href="odometer-theme-car.css" />
<script src="odometer.js"></script>

要素を指定する時にjQueryのセレクタを使用する時は、jquery.jsを加えます。

Step 2: HTML

オドメーターを表示する要素を配置します。
「123」は初期表示の数字です。

<div id="odometer" class="odometer">123</div>

Step 3: JavaScript

innerHTMLで最終的に表示する数字を指定します。
テキストの場合は、innerTextでセットします。

setTimeout(function(){
    odometer.innerHTML = 456;
}, 1000);

jQueryを使用すると、下記のようになります。
テキストの場合は、text()でセットします。

$('.odometer').html(123)

特定の文字のみ使用する場合は、下記のようにHTMLで記述します。
odometer-first-valueが初期表示、odometer-last-valueが最終表示。

<span class="odometer-value odometer-first-value">&nbsp;</span>
<span class="odometer-value">L</span>
<span class="odometer-value">M</span>
<span class="odometer-value odometer-last-value">O</span>