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

cubeTransition.js

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

cubeTransition.js

デモ

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

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

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

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

cubeTransition.js

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives