AMG Solution

OdometerライブラリとjQueryで、おしゃれに数値の表示を行う

こんにちは、樋口です。
 
今回は、ライブラリを読み込むだけで簡単に数字の表示方法を変えることができる、「Odometer」についてご紹介します。
 
今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
odometer.js
0.4.6
BootStrap
3.2.0

ライブラリの入手

odometer.jsは下記サイトよりダウンロードできます。
odometerダウンロード
 
ZIPファイルダウンロード後、odometer-0.4.6フォルダの中にある、「odometer.js」と「themes」フォルダの中身を自身のプロジェクトに持ってきます。
 
これで準備は完了です。

フォルダ階層

今回は、下記フォルダ階層でサンプルを作成していきます。
 

 test
  |- index.html
  |- js
   |- test.js
   |- jquery.js
   |- odometer.js
  |- css
   |- bootstrap.css
   |- odometer-theme-car.css
   |- odometer-theme-default.css
   |- odometer-theme-digital.css
   |- odometer-theme-minimal.css
   |- odometer-theme-plaza.css
   |- odometer-theme-slot-machine.css
   |- odometer-theme-train-station.css

HTMLファイル

初めに、HTMLファイルを作成します。
 
– index.html

9~10行目:
 odometer.jsで使用するCSSを読み込みます。
 
24行目:
 数値の表示を行うエリアを記載しています。
 クラス名とIDに「odometer」を設定してください。
 
30~32行目:
 odometer.jsで使用するjavaScriptを読み込みます。
 
以上で、HTMLは完成です。
次に、javaScriptについて説明します。

javaScriptファイル

ライブラリ実行用のjavaScriptファイルを作成します。

– test.js

2行目:
 odometerに値を表示するため、対象のクラスのテキスト内容を変更しています。

実行結果

最後に

今回紹介したライブラリを使用すれば、簡単に数値の表示をおしゃれにすることができます。
 
今回は「odometer-theme-car.css」でご紹介しましたが、ダウンロードを行った別のCSSを読み込むことによって別の表示を行うことができますので、興味がある方はぜひ試してみてください。
 
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING