備忘録6〜背景を動かしたい〜

この動画のように、背景画像がスクロールに合わせて動くようにしたい・・・

PCサイトだけだったら、CSSだけでいけるんですが、スマホサイトはCSSだけでは動かないです。

まずは、HTMLです。

<div class="parallax bg-01" id="parallax-01">
<!--1枚目の背景画像-->
</div>
<div class="back scrollbox2 content text-dark text-center">
<h2 class="border-0">なんかタイトルっぽいの</h2>
<p>テキスト
</p>
<div>

<div class="parallax bg-02" id="parallax-02">
<!--2枚目の背景画像-->
</div>
<div class="back scrollbox3 content text-dark text-center">
<h2 class="border-0">なんかタイトルっぽいの</h2>
<p>テキスト
</p>
<div>

<div class="parallax bg-03" id="parallax-03">
<!--3枚目の背景画像-->
</div>
<div class="back scrollbox4 content text-dark text-center">
<h2 class="border-0">なんかタイトルっぽいの</h2>
<p>テキスト
</p>
<div>

次にCSSです。

.parallax {
    min-height: 20vh;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;    
}
.parallax.bg-01 {
 background-image: url(https://www.peop.jp/wp-content/uploads/2021/02/para_01-min.jpg);height: 80vh;}

次にJavaScript部分

 //表示位置にあるかのフラグを用意
 var flag_target1 = false;
 var flag_target2 = false;
 var flag_target3 = false;

//指定IDの指定
  var target1 = $("#parallax-01");
 //指定IDの位置取得
  var targetPosOT1 = target1.offset().top;
	
  var target2 = $("#parallax-02");
  var targetPosOT2 = target2.offset().top;
	
  var target3 = $("#parallax-03");
  var targetPosOT3 = target3.offset().top;

//どのくらい画像を動かすか？
  var targetFactor = 0.5;
 
 //ウインドウの高さを取得
  var windowH = $(window).height();

//対象の位置を計算
  var scrollYStart1 = targetPosOT1 - windowH;
  var scrollYStart2 = targetPosOT2 - windowH;
  var scrollYStart3 = targetPosOT3 - windowH;

//指定要素が見えたら、再計算
$("#bg-01img").on('inview', function(event, isInView) {
        if(isInView) { 
           targetPosOT2 = target2.offset().top;
           scrollYStart2 = targetPosOT2 - windowH;
        }
    });


$("#bg-02img").on('inview', function(event, isInView) {
        if(isInView) { 
           targetPosOT3 = target3.offset().top;
           scrollYStart3 = targetPosOT3 - windowH;
        }
    });
    
    //要素が見えたら、フラグをON
$(target1).on('inview', function(event, isInView) {
        if(isInView) { 
           flag_target1 = true;
        }else{
           flag_target1 = false;

}
          console.log("flag_target1: " + flag_target1);

    });
    
$(target2).on('inview', function(event, isInView) {
        if(isInView) { 
           flag_target2 = true;
        }else{
           flag_target2 = false;

}
          console.log("flag_target2: " + flag_target2);

    });
 $(target3).on('inview', function(event, isInView) {
        if(isInView) { 
           flag_target3 = true;
        }else{
           flag_target3 = false;

}
          console.log("flag_target3: " + flag_target3);

    });
    
    //スクロールで都度計算
  $(window).on('scroll',function(){

    var scrollY = $(this).scrollTop();

//要素が見えている時に動くようにしてます
    if(scrollY > scrollYStart1&&flag_target1 == true){
      target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px');
    }else{
      target1.css('background-position','center top');
    }



    if(scrollY > scrollYStart2&&flag_target2 == true){
      target2.css('background-position-y', (scrollY - targetPosOT2) * targetFactor+ 'px');
    }else{
      target2.css('background-position','center top');
    }



   if(scrollY > scrollYStart3&&flag_target3 == true){

      target3.css('background-position-y', (scrollY - targetPosOT3) * targetFactor + 'px');

    }else{
      target3.css('background-position','center top');
    }

  });
});

指定された要素が見えているか判別するのに下記を読み込みます。

<script src="/js/jquery.inview.min.js"></script>

アニメーションように、紹介されておりました。無駄な位置計算を止めたいので流用します。

これで、スマホもPCも背景画像が固定されてスクロールすると動くようになったと思います。

初め、inviewを使わずに設定してましたが、途中でスクロールがカクカクするようになってしまい、

見るに耐えない状態になってしまいました。

背景画像が出るところが見えるまで、計算させないようにしてみたところ、まあなんとか見映えがするものになったかと思います。

実際のページで動きを確認して頂けると嬉しいです。