no-image

JavaScript

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

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

stack-slider

デモ

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

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

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

stack-slider

no-image親要素の下端まで要素を固定表示できる「Scroll With Page」前のページ

ドロップアニメーションがお洒落なナビゲーションメニュー「Menu Droplet Animation」次のページMenu Droplet Animation

関連記事

  1. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  2. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  3. jQuery Sequency js

    JavaScript

    スクロールでビフォー・アフター画像を見比べれる「jQuery Sequency js」

    jQuery Sequency jsはスクロールでビフォー・アフター画…

  4. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  5. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  6. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP