no-image

JavaScript

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

stack-sliderはカードを入れ替えるような3Dアニメーションによるカッコいいスライダーを実装できます。一枚一枚の画像がカードのようにスタックされていて、手前から奥(または奥から手前)にカードを送るように画像を前後移動できるのが特徴です。

stack-slider

デモ

デモでは全部で4枚の画像が用意されたスライダーが設置されています。左右の矢印アイコンから画像を前後移動できるほか、スライダー下部にはナビゲーションも付いていて、ここから好きな位置にある画像を選択することも可能です。

4枚の画像は3Dのように立体的に並べられています。右側には後ろに並べられている画像が少し見えるようになっていて、ここから各画像をクリックすることでその画像を前面に表示させることもできます。

カードを手前から奥に、もしくは奥から手前に入れ替えるように画像を前後移動できるのがおもしろいですね。立体感のある優雅なアニメーションによるスライダーを実装したい人にはピッタリです。

stack-slider

関連記事

  1. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  2. Bootstrap Photo Gallery jQuery plugin
  3. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  4. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  5. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP