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

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  2. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  3. JavaScript

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

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

  4. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  5. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  6. 3D Cube CountDown script

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP