cubeTransition.js

JavaScript

3Dキューブのようなスライダーを実装できる「cubeTransition.js」

cubeTransition.jsは、CSS 3DトランスフォームとCSSアニメーション、jQueryを活用した3Dキューブのようなエフェクトによるスライダーを実装することができるjQueryプラグインです。キューブのような動きがとてもおもしろいですね。

cubeTransition.js

デモ

デモではスクロールや上下左右矢印キー、または下部に設置されたナビゲーションからコンテンツを切り替えることができます。普通にスライドするのではなく、3Dキューブのように立体感を演出しながら切り替わっていきます。

画面いっぱいに立体的に切り替わるアニメーションはとてもダイナミックですね。

また、デモではレスポンシブにも対応しているので、PCだけではなくモバイルでも見やすくなっています。さまざまなデバイスに対応したスライダーを実装したい人は要チェックです。

というわけで、CSS 3DトランスフォームやCSSアニメーションなどを使った3Dキューブのようなスライダーを実装できる「cubeTransition.js」のご紹介でした。

cubeTransition.js

関連記事

  1. jQuery Navobile
  2. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  3. Responsive Parallax Drag-slider With Transparent Letters
  4. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  5. respontent

    JavaScript

    様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

    respontentというjQueryプラグインを使えば、画像・You…

  6. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

    RemodalというjQueryプラグインを使えば、レスポンシブに対応…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP