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. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  2. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  3. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  4. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  5. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  6. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP