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

scroll-scope.js親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」前のページ

スムーズなアニメーションでシンプルなアコーディオン実装「Woco Accordion jQuery plugin」次のページWoco Accordion jQuery plugin

関連記事

  1. no-image
  2. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  3. Intense Images
  4. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  5. Text Rotator
  6. no-image

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP