【jQuery】スクロールに合わせて背景画像が上にずれるパララックス(複数対応)

複数の背景画像がスクロールに合わせて上にずれていくパララックスを作ったときの備忘録

ソースコード

<style>
html, body {
  background: black;
  padding: 0;
  margin: 0;
}
section{
  height: 100vh;
}
.inner{
  height: 80%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.text{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 3;
    font-size: 30px;
    font-weight: bold;
    color: white;
    left: 0;
    right: 0;
}
.bg{
  position: absolute;
  top: 0%;
  bottom: 0%;
  height: 100%;
  width: 100%;
}
.img{
  background-image: url(https://twotone.me/wp-content/uploads/2020/06/waterfall.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size:cover;
  height: 100%;
  width:100%;

}
</style>

<section class="sect01">
  <div class="inner">
    <div class="text">これはテスト</div>
    <div class="bg">
      <div class="img"></div>
    </div>
  </div>
</section>

<section class="sect02">
  <div class="inner">
    <div class="text">これはテスト</div>
    <div class="bg">
      <div class="img"></div>
    </div>
  </div>
</section>

<section class="sect03">
  <div class="inner">
    <div class="text">これはテスト</div>
    <div class="bg">
      <div class="img"></div>
    </div>
  </div>
</section>

<section class="sect04">
  <div class="inner">
    <div class="text">これはテスト</div>
    <div class="bg">
      <div class="img"></div>
    </div>
  </div>
</section>

<section class="sect05">
  <div class="inner">
    <div class="text">これはテスト</div>
    <div class="bg">
      <div class="img"></div>
    </div>
  </div>
</section>

<script>
jQuery(function($){
  $(document).scroll(function() {
    $("section").each(function(){
      var imgPos = $(this).offset().top;//画像の位置
      var scrollPos = $(window).scrollTop();//現在位置
      var windowHeight = $(window).height();//ウィンドウサイズ
      var imgRange = imgPos + $(this).innerHeight();//画像範囲
      var contentTop = scrollPos + windowHeight - imgPos;//画像内の位置情報(scrollTop関数の代わり)
      $('.img').css('background-size','auto ' + (windowHeight + $(this).innerHeight() / 20) +'px');//画像のリサイズ
      if(scrollPos+windowHeight > imgPos && scrollPos < imgRange ){//画像が画面内に少しでも入ったらtrue
        $(this).find('.img').css({
          "background-position-y": (-contentTop / 20)//背景画像をスクロールに合わせて上にずらす
        })
      }
    });
  });
});
</script>

jQueryで.scrollTop()がうまく動かないのでcontentTopという変数を作って代用している

スクロールしたらbackground-position-yで画像がスクロールの方向に対して逆に動く用に設定しているが、background-position-yでずれる分の高さが必要になるので

$('.img').css('background-size','auto ' + (windowHeight + $(this).innerHeight() / 20) +'px');//画像のリサイズ

で画像のリサイズをしている

懸念事項としては、

・スクロールしてから画像をリサイズされること
・今回スマホ用に作ったので、PC時に画像が高さに合わせてリサイズされること

この辺は、スマホとPCの画像を分ける予定と事前に画像サイズの比率なりを調べていい感じする予定
コードが長くなりそうだったから今回は辞めといた

参考