【jQuery】スクロールすると背景画像が「左・右・下」などに移動する処理方法

jQuery

こんにちは、ダイキです。
今回は jQuery を使用して、画面がスクロールされると、背景画像が「左・右・下」などに移動する処理を書いていきます。
これは結構難しかったですね。検索しても全然出てきませんでした。
ですが問題は簡単で、background-position を指定して、js でスクロールしたらもう一度、cssを付与すればよかっただけですね。
ただ、上に移動させようとすると失敗するのであしからず。
※長くなるので細かい部分は省いています。

HTMLです。スクロールすると背景画像が「左・右・下」などに移動する処理方法


<div id="mv" class="mv">
  <div class="d-flex">
    <div class="img_wrap">
      <figure class="img"></figure>
    </div>
    <div class="img_wrap">
      <figure class="img"></figure>
    </div>
    <div class="img_wrap">
      <figure class="img"></figure>
    </div>
  </div>
</div><!-- mv -->

CSSです。スクロールすると背景画像が「左・右・下」などに移動する処理方法


.mv {
  position: relative;
}

.mv::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
}

.mv .img_wrap {
  width: 100%;
  height:100vh;
}

.mv .img {
  width: 100%;
  height: 100vh;
  background-image: url(/img/feature1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

JavaScriptです。スクロールすると背景画像が「左・右・下」などに移動する処理方法


// スクロールすると背景が動く ------------------------

$(window).on("scroll", function () {
  let scrollTop = $(window).scrollTop();
  let bgPosition = scrollTop / 2; //スクロール後のポジションを指定(値を大きくすると移動距離が小さくなる)

  if (bgPosition) {
    $(".mv .img_wrap:nth-of-type(1) .img").css(
      "background-position",
      "center left -" + bgPosition + "px"
    );
    $(".mv .img_wrap:nth-of-type(2) .img").css(
      "background-position",
      "center bottom -" + bgPosition + "px"
    );
    $(".mv .img_wrap:nth-of-type(3) .img").css(
      "background-position",
      "center right -" + bgPosition + "px"
    );
  }
});