JQuery - scrollTop - parallax表示

scrollTopを背景画像の縦位置に適用することで、Windowのスクロールに伴って 画像をスクロールさせることができる。 スクロールするとすぐ動き出すので、まず結果を下に。

3枚の画像は縦方向の初期位置が異なっていて、画面のスクロールに連動して3つの画像が同じスピードでスクロールしている。THMLとCSSは次の通り。

[HTML]

<div class="image_main"></div>

[CSS]

.image_main {
  background-image: url("./cosmos.png");
  background-repeat: no-repeat;
  height: 400px;
}

[JS/JQuery]

$(window).scroll(() => {
  console.log($(window).scrollTop());
  $('.image_main').css({'background-position-y': ($(window).scrollTop() / 5) + '%'});
});
      

この処理の大まかな流れは以下の通り。

1. ページのスクロールを捕捉してスクロール量を得る
2. ページのスクロール量を利用して画像のスクロール量を計算する
3. 画像のスクロール量を画像の位置情報としてcssで指定する

要点としては以下の通り。

• ページのスクロールの捕捉はwindowsオブジェクトから得られる
• スクロール量はscrollTop()メソッドで得られる
• 背景画像の位置はbackground-position-yで指定する

具体的には、(n + $(window).scrollTop() / r) + '%'の nで画像の初期位置を、rで画像スクロールのスピードを 調整している。

画像の初期位置とスクロールスピードの効果については、それぞれ以下のページで確認している。

• 縦位置の違いの確認
• スクロールスピードの違いの確認