jQueryプラグイン「flipCounter」

Pocket

数字を「大きくて美しいアナログ表示」にするjQuery用のプラグイン「flipCounter」を使ってみました。

準備

まず、上のページでプラグインをダウンロードします。私は「Bare Bones」の1.2を使いました。
解凍してファイルを適当なフォルダに入れます。
例えばfcというフォルダにjs、imgというフォルダを作ります。

  • fc
    • js
    • img

jsにjquery.flipCounter.1.2.pack.jsを保存します。
imgにflipCounter-medium.pngを保存します。

そして、別のプラグインが必要になります。
danro/jquery-easing · GitHub
jsにjquery.easing.jsを保存します。

HTML

bodyの部分に次のように書きます。

<div id="counter1"><input type="hidden" name="counter-value" value="100" /></div>
<div id="counter2"><input type="hidden" name="counter-value" /></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery.flipCounter.1.2.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$("#counter1").flipCounter();
</script>

最初の2行はカウンターを表示する部分です。
3行目はjQueryです。Googleから借りています。
4行目と5行目は先ほど準備したプラグインを指定しています。違うフォルダ構造の場合はここを修正します。
最後がコードの本体です。

JavaScript

上のコード本体の部分です。

$("#counter1").flipCounter();
$("#counter2").flipCounter("startAnimation", {
  number: 0,
  end_number: 99999,
  easing: jQuery.easing.easeOutExpo,
  duration: 5000
});

$("#counter1")の部分はHTMLで指定した「100」を表示するものです。動きません。
$("#counter2")の部分は「0」から「99999」までパタパタとアニメーションで表示するものです。easingで表示パターン、durationで間隔を指定します。

easingについては便利なチートシートがあります。
Easing Functions Cheat Sheet

プラグインや画像のフォルダを変える

上の例ではプラグインをjsというフォルダに保存していますが、別のフォルダに保存する場合は、

<script src={フォルダ} type="text/javascript"></script>

のフォルダの部分を適当に書き換えればよいです。

一方、画像ファイルについてはちょっと面倒です。
このプラグインはimgフォルダにある画像ファイルを読み出して使っていますが、デフォルトでは「HTMLファイルと同一のフォルダにあるimgというフォルダ」で固定です。
これと違うフォルダを使う場合は次のようにします。

$("#counter1").flipCounter({
  imagePath: "フォルダ/flipCounter-medium.png"
});
$("#counter2").flipCounter("startAnimation", {
  imagePath:"フォルダ/flipCounter - medium.png ",
    number: 0,
    end_number: 99999,
    easing: jQuery.easing.easeOutExpo,
    duration: 5000
});

[ 2012年9月18日 | カテゴリー: JavaScript | タグ: , , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報