パララックスの背景遅延の処理内容が分からないので教えてください。

Question

前提

ソースコードはこのサイトのコピペです

質問

• scrollYStart1とscrollYStart２の値は-〇〇〇pxになると思います。これは要素のどの位置に相当しますか?
• css:background-position-y部分の処理内容を理解できている気がしません。どのような処理なのか教えてください

該当のソースコード

<div class="wrap">
    <div class="parallax bg-01" id="parallax-01">背面：パララックスエリア
    </div>
    <div class="content">前面：コンテンツエリア
    </div>
    <div class="parallax bg-02" id="parallax-02">背面：パララックスエリア
    </div>
    <div class="content">前面：コンテンツエリア
    </div>
</div>

$(function(){
  var target1 = $("#parallax-01");
  var targetPosOT1 = target1.offset().top;
  var target2 = $("#parallax-02");
  var targetPosOT2 = target2.offset().top;
  var targetFactor = 0.5;
  var windowH = $(window).height();
  var scrollYStart1 = targetPosOT1 - windowH; // ここです
  var scrollYStart2 = targetPosOT2 - windowH;
  $(window).on('scroll',function(){
    var scrollY = $(this).scrollTop();
    if(scrollY > scrollYStart1){
      target1.css('background-position-y', (scrollY - targetPosOT1) * targetFactor + 'px'); // ここです
    }else{
      target1.css('background-position','center top');
    }
    if(scrollY > scrollYStart2){
      target2.css('background-position-y', (scrollY - targetPosOT2) * targetFactor + 'px');
    }else{
      target2.css('background-position','center top');
    }
  });
});

Comments

[Lhankor_Mhy]

「scrollYStart1とscrollYStart２の値は-〇〇〇pxになると思います。」とのことですが、当方の環境で試したところ、-221、323でした。

[退会済みユーザー]

scrollYStart1の値しか確認していませんでした。両方確認してみます。

Answer 1

scrollYStart1とscrollYStart２の値は-〇〇〇pxになると思います。これは要素のどの位置に相当しますか?

その後にif(scrollY > scrollYStart1){というコードがあります。
ここに、scrollYStart1 = targetPosOT1 - windowHを代入すると、
scrollY > targetPosOT1 - windowH
つまり、
scrollY + windowH > targetPosOT1
です。
これを言葉で表すと、「現在のスクロール量 + ウィンドウ高さ > ターゲットの上端」ということです。
たとえば、ターゲットの上端が500、ウィンドウ高さが400だとすると、現在のスクロール量が100を超えると条件成立、ということです。

---

css:background-position-y部分の処理内容を理解できている気がしません。どのような処理なのか教えてください

背景画像が通常どおりに配置されている、つまり(scrollY - targetPosOT1) * targetFactorが0になる時は、scrollY = targetPosOT1の時、つまり、現在のスクロール量がターゲットの上端と等しい時、すなわち、ターゲットの上端がスクリーン上端に接しているときです。
これよりスクロール量が少ない、つまり、ターゲットの上端がスクリーン上端に達していない時、(scrollY - targetPosOT1) * targetFactorは負になりますから、background-position-yが負になります。これは、背景画像が上に見切れる、ということです。
これよりスクロール量が多い、つまり、ターゲットの上端がスクリーン上端の上に隠れているとき時は、同様の理屈で背景画像が下に見切れる、ということです。

スクロールしてスクリーンに入ってきた時、背景画像が上に見切れていて、スクロールさせていくと下に見切れていく、ということは、スクリーンから見ると背景画像がスクロールに追いつかれて追い抜かれているように見えます。つまり、スクロールに対して視差効果を表現しているということです。

なお、targetFactorの意味はコピペ元のページに書いてある通りです。

Comments

[退会済みユーザー]

ありがとうございます。