no-image

JavaScript

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

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

stack-slider

デモ

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

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

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

stack-slider

関連記事

  1. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  2. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  3. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  4. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  5. diamonds.js
  6. Erge Drop Down Menu Control

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP