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

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  2. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  3. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  4. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  5. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  6. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP