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. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

  2. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  3. Animsition
  4. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  5. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  6. cascadingDivs

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP