scroll - initial position

scrollTopに定数を加算すると、画像の初期位置が変化する。スクロールするとすぐ動き出すので、まず結果を下に。

n = -50

n = 0

n = 50

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

HTML


<div class="image_frame">
  <div id="image1" class="image_sub1"></div>
  <div id="image2" class="image_sub2"></div>
  <div id="image3" class="image_sub3"></div>
</div>

CSS（画像1枚分のみ）


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

JS/JQuery


$(window).scroll(() => {
  console.log($(window).scrollTop());
  $('#image1').css({'background-position-y': (-50 + $(window).scrollTop() / 10) + '%'});
  $('#image2').css({'background-position-y': (0 + $(window).scrollTop() / 10) + '%'});
  $('#image3').css({'background-position-y': (50 + $(window).scrollTop() / 10) + '%'});
});

先の3つの画像は、(n + $(window).scrollTop() / r) + '%'のnを変えたときの画像スクロールの初期位置の違いを比べたもの。マイナスの場合は画像より上に余白ができ、プラスの場合は画像途中から始まっている。なお、scrollTop()に関する項の符号がマイナスの場合はスクロールの方向が上下逆になる。

scrollTop - 初期位置