jquery - スクロールで背景画像を変更

Question

ブラウザ全体に収まるはずの画像がたくさんあり、スクロールすると次の画像に変わります。私はこれが初めてで、自分が何をしているのか本当にわかりません。私はこれを見てきました：基本的に私が望むクリックで変化するWebサイトの背景画像を作成しますが、クリックで変化するのではなく、スクロールで変化します。

同じコンセプトかどうかわかりません... 何かアイデアはありますか?

Answer 1

$(window).scrollTop()を使用して現在のスクロール量を決定し、$(body).css('background-image', '/i/image.jpg')を使用して実際に背景画像を変更できます。

$(window).scroll(function() {
    var image_url = '/i/image1.jpg'
    if ($(window).scrollTop() > 800) {
        image_url = '/i/image2.jpg';
    }
    $(body).css('background-image', "url('" + image_url + "')");
});

これは単なる概念です。すべての画像を「配列」内に配置し（例のように）、動的に適用する画像を決定する必要があります。