StickyStack.js

JavaScript

パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

StickyStack.jsはパネルにスタッキング効果を実装することができるjQueryプラグインです。コンテンツはパネル単位になっており、スクロールしていくことでパネルがどんどん積み重なっていくような感じでスタッキングされます。

StickyStack.js

デモ

ブラウザ画面いっぱいに広がったパネルがスクロールすることでどんどんスタッキングされていきます。とてもダイナミックで見応え感がありますね。

スクロールされるパネルは画面のトップまでくると次のパネルが下から表示されてきます。新しいパネルが次々に前面にくるようになっています。

逆スクロールすると積み重なったパネルがどんどんめくれていきます。

使い方はこんな感じです。

$('.main-content-wrapper').stickyStack({
    containerElement: '.main-content-wrapper',
    stackingElement: 'section',
    boxShadow: ''0 -3px 20px rgba(0, 0, 0, 0.25)'
});

ボックスシャドウもオプションで調節することができます。

StickyStack.js

関連記事

  1. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

  2. 3D Cube CountDown script
  3. no-image
  4. no-image
  5. Sticky Slider Navigation(Responsive)
  6. Sliding Panels Template

最近の記事

  1. ペーストしてスタイルを合わせる
  2. Hermèsオレンジスポーツバンド
  3. GoPro HERO8 Black

アーカイブ

PAGE TOP