countdownCube

JavaScript

3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

countdownCubeは3Dキューブのようにクルッと回転するカウントダウンタイマーを実装することができるjQueryプラグインです。回転が加わることで、よりリアルなカウントダウンの臨場感がでてきますね。3Dの回転するキューブエフェクトにはCSSのtransitionが使われているとのこと。

countdownCube

デモ

デモでは3Dキューブのように回転しながらリアルタイムで時の経過を知らせてくれるカウントダウンタイマーが設置されています。year、month、day、hour、minute、secondの数値が表示されていて、刻々とカウントダウンされているのを確認できます。

各項目の数値が切り替わる時に、3Dキューブのようにクルッと回転して切り替わります。回転するエフェクトが加わることで、時間が進んでいることへの臨場感がプラスされると思います。

どこか退屈になりがちなカウントダウンタイマーに、動きを与えて視覚的な楽しみを体験できるカウントダウンタイマーに仕上がっている印象です。

使い方も簡単で、キューブのサイズや背景カラーなどのセッティングも手軽にできるのがいいですね。target、targetTimezone、cubeSize、background、colorなど、いろんな項目のセッティングが可能なので、カスタマイズして使いたい人にも使いやすいと思います。

countdownCube

関連記事

  1. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  2. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  3. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  4. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  5. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  6. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP