Davor Spasovski / Web Developer

画像を使った綺麗なタイマーが実装できるjQueryプラグイン「spriteTimer」。
次のような１枚の画像を使って簡単に綺麗なカウントダウン＆カウントアップタイマーが実装できます。
タイマーを表示されるなら味気ないテキスト表示よりも画像で綺麗にやりたいですよね。
画像なので、画像編集ツールを使って簡単にフォントやデザインを替えられます。

元画像。これをjQueryでCSSスプライトを活用してタイマーにします。


残り１時間に設定したカウントダウンタイマー。ちゃんと時間表示になってますね。



カウントアップにも対応。スタート/ストップボタンによってタイマーの制御も出来ます。



地味に使いそうなので覚えておいてもよさそう。

関連エントリ

• 画像にぼかし効果を与えられるjQueryプラグイン「Image Blur」
• 色合いを選べるツールチップ実装jQueryプラグイン「Colortip」
• 通貨、日付のグローバリゼーションを可能にするjQueryプラグイン