scrollTop - scroll rate

scrollTopを定数で乗除することで画像スクロールのスピードを変えられる。スクロールするとすぐ動き出すので、まず結果を下に。

r = 2

n = 4

n = 6

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': ($(window).scrollTop() / 3) + '%'});
  $('#image2').css({'background-position-y': ($(window).scrollTop() / 5) + '%'});
  $('#image3').css({'background-position-y': ($(window).scrollTop() / 10) + '%'});
});

先の3つの画像は、($(window).scrollTop() / r) + '%'のrを変えたときの画像スクロールのスピードの違いを比べたもの。 scrollTopをrで割っているが、rが大きいほど（つまり全体の値が小さいほど）スクロールスピードが遅くなっている。なお、scrollTop()に関する項の符号がマイナスの場合はスクロールの方向が上下逆になる。

scrollTop - スクロールスピード