数字を「大きくて美しいアナログ表示」にする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="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
上のコード本体の部分です。
$("#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というフォルダに保存していますが、別のフォルダに保存する場合は、
のフォルダの部分を適当に書き換えればよいです。
一方、画像ファイルについてはちょっと面倒です。
このプラグインはimgフォルダにある画像ファイルを読み出して使っていますが、デフォルトでは「HTMLファイルと同一のフォルダにあるimgというフォルダ」で固定です。
これと違うフォルダを使う場合は次のようにします。
imagePath: "フォルダ/flipCounter-medium.png"
});
imagePath:"フォルダ/flipCounter - medium.png ",
number: 0,
end_number: 99999,
easing: jQuery.easing.easeOutExpo,
duration: 5000
});
コメント