各セクションを重なるようにスクロールさせることができるjQueryプラグイン「StickyStack.js」

StickyStack.jsは、スクロールに合わせて下の要素が上に重なっていくようなエフェクトを加えることができるjQueryプラグインです。要素が下からせり上がってくるような印象を与えることができます。

挙動は以下ページにてご確認いただけます。

デモページを見る

StickyStack.jsの使い方

ステップ1. StickyStack.jsのダウンロードと設置

GitHubからファイル一式をダウンロードし、jquery.stickystack.min.jsをサーバー上に設置します。

そのうえで、jQuery本体と一緒にJSファイルを読み込みます。</body>の直前に以下を追加しましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.stickystack.min.js"></script>

ファイルパスは適宜変更してください。

ステップ2. HTMLのマークアップ

HTMLは以下のようにマークアップします。

<div class="main-content-wrapper">
  <section>コンテンツ1</section>
  <section>コンテンツ2</section>
  <section>コンテンツ3</section>
  <section>コンテンツ4</section>
</div>

全体を.main-content-wrapperで包括します。

ステップ3. StickyStack.jsの実行

最後に、StickyStack.jsを実行します。

<script>$('.main-content-wrapper').stickyStack();</script>

記述する場所は</body>の直前でOKです。jQuery本体とjquery.stickystack.min.jsの読み込みの後ろに記述します。

オプションを指定する場合は、以下のようにします。

<script>
$('.main-content-wrapper').stickyStack({
  containerElement: '.main-content-wrapper', //対象要素
  stackingElement: 'section', //区切りとなる要素
  boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)' //区切りの影
});
</script>

あとがき

面白い効果を加えることができますね。

一風変わったスクロールエフェクトを実装したい時はぜひご検討ください。