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. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  2. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  3. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  4. no-image
  5. Sliding Panels Template
  6. Swipeshow

    JavaScript

    スワイプにも対応したシンプルなスライドショーを実装できるjQueryプラグイン「Swipeshow」…

    タッチデバイスのスワイプにも対応したシンプルなスライドショーを実装する…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景

アーカイブ

PAGE TOP