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

jBoxツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」前のページ

テキスト入力候補を表示させれる「jQuery.Flexdatalist」次のページjQuery.Flexdatalist

最近の記事

  1. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP