質問: $(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'); } }); }); ```
回答: >scrollYStart1とscrollYStart2の値は-〇〇〇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`の意味はコピペ元のページに書いてある通りです。