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. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP