視差効果のホワイトスペース

Question

視差効果は、スクロールするときにページの上部に空白を追加します。

私はJavaScript：

<script> 
    $(window).scroll(function() { 
    var scrolledY = $(window).scrollTop(); 
    $('.bg').css('background-position', 'left ' + ((scrolledY)) + 'px'); 
}); 
</script> 

ませスクロール：

スクロール：それは右の行くよう

Answer 1

をこのコードは、スクロールの画素に垂直オフセットを追加：画像が下にシフトしたとき、上に表示するものは何もありません。 background-repeatを設定するか、オフセット値を制御し、範囲外になった後に新しい値を設定しないようにする必要があります。また、スクロールしたYの値に-1を掛けて、ページ上を移動する背景の画像を視差効果のようにスクロールする必要があります。

$(window).scroll(function() { 
    var scrolledY = -1 * $(window).scrollTop(); 
    $('.bg').css('background-position', 'left ' + (scrolledY) + 'px'); 
}); 

また、バックグラウンドオフセットの速度は、垂直値を2等分することで制御できます。ここに例があります：https://jsfiddle.net/panamaprophet/9pkrxjh0/