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

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  2. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

  4. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  5. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  6. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP