スクロールすると1画面移動
scrollfy.jsというライブラリを使い、1スクロールで次の画面まで移動する。
【使用するライブラリ】
scrollfy.js（https://projects.lukehaas.me/scrollify/）
See the Pen スクロールすると1画面移動 by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロールすると画面やエリアが時間差で重なる
Luxy.jsというライブラリを使い、各要素に動きを指定してスクロールをすると画像やエリアが時間差で重なるように設定する。
重なりのあるレイアウトに使用すると浮遊感のあるリッチな印象のサイトになる。
【使用するライブラリ】
Luxy.js（https://min30327.github.io/luxy.js/）
See the Pen スクロールすると画面やエリアが時間差で重なる by Toru Katsumata (@Toru-Katsumata) on CodePen.
【動き指定のクラス名】
data-speed-y：縦方向のパララックス効果の速度を数字で指定（マイナスの値も利用可能）
data-horizontal：水平方向に移動する場合に指定
data-speed-x：水平方向の速度（マイナスの値も利用可能）
data-offset：表示位置を座標で指定（マイナスの値も利用可能）
スクロールすると画面分割した左右がそれぞれ動く
multiScroll.js というライブラリを使い、スクロールをすると分割された左右の画面が別方向に動くアニメーションを実現する。
ギャラリーサイトなど掲載文字数が少ないサイト向け。
【使用するライブラリ】
・jquery.easing.js ※multiScroll.jsを動かすために必要
・multiScroll.js （https://alvarotrigo.com/multiScroll/）
See the Pen スクロールすると画面分割した左右がそれぞれ動く by Toru Katsumata (@Toru-Katsumata) on CodePen.
※レスポンシブに対応したい場合は有料プラグイン（https://alvarotrigo.com/multiScroll/extensions/）の購入が必要。768px以下では右カラムを非表示にする形で疑似的にレスポンシブ化をする。
スクロールすると紙芝居風に展開
CSSの position: sticky;を使用してスクロールをしたエリアを重ねて表示し、紙芝居風に見せる。
※768px以下のウィンドウサイズでは紙芝居風にせずに縦並びに表示する。
See the Pen スクロールすると紙芝居風に展開 by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロールすると下のエリアがヘッダーにかぶさる
CSSを使い、headerの擬似要素であるafterに表示を固定するposition:fixed; と、エリアの重なる順番を一番下にする z-index:-1;を指定する。下のかぶさるエリアにはposition:relative; とz-index:1;を指定する。
※この方法の他に、エリアにbackground-attachment:fixed;を指定する簡単な方法もあるが、スマートフォンのブラウザによっては動きが実現しないことがある。
See the Pen スクロールすると下のエリアがヘッダーにかぶさる by Toru Katsumata (@Toru-Katsumata) on CodePen.
スクロールするとヘッダー背景画像が拡大
CSSで画面全体を覆う背景画像をposition:fixed;で固定し、JavaScript側でスクロールにあわせ、背景画像の位置をずらし、拡大を加える。
See the Pen スクロールするとヘッダー背景画像が拡大 by Toru Katsumata (@Toru-Katsumata) on CodePen.
