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. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  2. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

  3. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  4. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  5. Stackbox.js

    JavaScript

    プルプル震えるモーダルボックスを実装できるjQueryプラグイン「Stackbox.js」

    Stackbox.jsというjQueryプラグインを使えば、プルプル震…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP