2020/04/03 (更新日: 2021/12/24)

紙芝居のようにスクロールできる”StickyStack.js”の使い方

スクロールをコントロールしてパララックス効果を持たせることができるjQueryのプラグイン「StickyStack.js」の使い方を紹介します。
「StickyStack.js」ではコンテナ要素の中にいくつかのスタッキング要素を配置すると、スクロールした時にスタッキング要素が固定されて表示されるので、下からスクロールアップしてくる要素が上に重なっていくような視覚効果を実現することができます。

参考サイト：
「StickyStack.js」デモサイト
 「StickyStack.js」ダウンロード

「StickyStack.js」の設置手順

「StickyStack.js」の設置手順は、
① jQueryを読み込ませる
②「StickyStack.js」を読み込ませる
③ 要素の記述を行い実行させる
となります。
それぞれについて、説明していきます。

①jQueryを読み込ませる

CDNを利用するなどしてjQueryを読み込ませます。

CDNを利用する場合の例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQueryを読み込ませる方法について詳しくは下記の記事で紹介しています。

②「StickyStack.js」を読み込ませる

「jquery.stickystack.min.js」または「jquery.stickystack.js」をダウンロードしてサイトに設置し、読み込ませます。
ダウンロード：「StickyStack.js」のGitHubページ

<script src="path-to/jquery.stickystack.min.js"></script>

③要素の記述を行い実行させる

htmlにコンテナ要素とスタッキング要素を設置してcssで整え、「StickyStack.js」を実行させる記述をします。
コンテナ要素にクラス名「main-content-wrapper」をつけて、スタッキング要素をそれぞれ「section」で囲って設置すると、「StickyStack.js」を実行させるときの記述が下のように簡単な記述ですみます。
スタッキング要素を「section」以外で囲いたいときの記述例は後ほど紹介します。

・htmlへの要素の設置

<div class="main-content-wrapper"> <!-- コンテナ要素　-->
  
   <section></section> <!-- スタッキング要素を必要な数だけ設置　-->
   <section></section>
   <section></section>
   <section></section>

</div>

・「StickyStack.js」を実行させる記述

 $('.main-content-wrapper').stickyStack();

「StickyStack.js」の設置例

デフォルト（section）でのスタッキング要素の設置

スタッキング要素を「section」で囲み、クラス名「main-content-wrapper」のコンテナ要素の中に設置した場合には「$(‘.main-content-wrapper’).stickyStack();」という記述だけで「StickyStack.js」を実行させることができます。

See the Pen
wvaRZdZ by saku (@web-saku)
on CodePen.

デフォルト（section）以外でのスタッキング要素の設置

スタッキング要素を「section」以外の要素で囲んだ場合でも、実行時にオプション設定で「stackingElement: ‘.page’」のように要素名やクラス名などでスタッキング要素を指定することで「StickyStack.js」を動作させることができます。

See the Pen
yLNGrLB by saku (@web-saku)
on CodePen.

オプション設定

「StickyStack.js」では、実行時にオプション設定として下の例のように「containerElement」「stackingElement」「boxShadow」を設定することができます。

・「StickyStack.js」をオプション設定付きで実行させる記述

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

「containerElement」	スタッキング要素を囲む要素のクラス名などを設定します。デフォルトでは「.main-content-wrapper」となっているので、変更したい場合にはここで設定します。
「stackingElement」	表示を固定させるスタッキング要素のクラス名などを設定します。デフォルトでは「section」となっているので、変更したい場合にはここで設定します。
「boxShadow」	スタッキング要素につけるboxshadowを設定します。デフォルトでboxshadowがつくようになっているので、付けたくない場合には、「boxShadow: ‘none’」と指定することでboxshadowなしにできます。