昔あった時計でフリップ式があります。数字がパラパラとめくれる仕組みです。1分経つごとにパネルがめくれ上がっていくのが面白く、見ていて飽きないものだった覚えがあります。 そんなフリップ式の時計を再現したUIがFlipClock.jsです。時計としての利用以外にも使える可能性があるライブラリです。

FlipClock.jsの使い方

FlipClock.jsを表示したところです。まさにあの懐かしさに溢れています。

実際に動いているところ。このパラパラとめくれるところが良いですね。

時間の表示。12時間または24時間を指定できます。

時間の幅も指定できます。こちらはカウントダウンタイマーにしたところです。

逆に時間と分だけに絞り込むこともできます。

Webサービスのティザーサイトでカウントダウンに使ったり、新年の時刻表示に使っても面白そうです。目標の時間に差し迫っているところがはっきり分かるのが面白さではないでしょうか。

FlipClock.jsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

FlipClock.js objectivehtml/FlipClock