0

ユーザーがページを下にスクロールしたときに、背景画像をfadeIn/fadeOutに取得しようとしています。長期的には、いくつかの背景画像を使用してタイム ラプス エフェクトを撮影しています。スクロール時に背景画像を変更していますが、次から次へとフェードさせることができないようです。

これが私がこれまでに得たものです - jsFiddle 

    $(document).scroll(function () {
if ($(this).scrollTop() > 1) {
    $('body').css({
        backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237846/sun1_web.png")'
    });
}
if ($(this).scrollTop() > 250) {
    $('body').css({
        backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237850/sun2_web.png")'
    });
}
if ($(this).scrollTop() > 500) {
    $('body').css({
        backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237854/sun3_web.png")'
    });
}
if ($(this).scrollTop() > 750) {
    $('body').css({
        backgroundImage: 'url("http://s3.amazonaws.com/dfc_attachments/images/3237858/sun4_web.png")'
    });
}

});
4

3 に答える 3

1

この問題を抱えている他の人のために、これがどのように機能するかを示します。

    $(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 150) {
    $('#img2').fadeIn();
}
else {$('#img2').fadeOut('fast')};

if (y > 300) {
    $('#img3').fadeIn();
}
else {$('#img3').fadeOut('fast')};

if (y > 450) {
    $('#img4').fadeIn();
}
else {$('#img4').fadeOut('fast')};
});

jsフィドル

于 2013-03-21T13:54:15.180 に答える
0

background-imageプロパティをアニメーション化することはできません。代わりに、標準のタグで画像をレンダリングし、<img>それらを互いの上にフェード インします。

于 2013-03-20T14:54:29.457 に答える