如何對看似“固定”的圖像使用視差滾動？

Question

我正在使用視差滾動，並且當前已進行設置，以使我的背景圖像以正常內容滾動速度的50％滾動。 看到這里： www.jurbs.com 。 （內容在Chrome和Opera中進行了優化）

理想情況下，我希望圖像中完全沒有滾動，但是隨着內容的滾動，圖像的可見性也會相應地滑動和發展。 有關示例，請參見： www.tooyoungtowed.org 。

這是相關的CSS：

#content {
z-index: 4;
position: relative;
max-width: 940px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#content article {
    width: 300px;
    }
    #firstbox ,
    #secondbox,
    #thirdbox,
    #fourthbox {
        padding-top: 105px;
        }
    #firstbox {
        position: absolute;
        top: 0px;
        left: 730px;
        }
    #secondbox {
        position: absolute;
        top: 2120px;
        left: 730px;
        }
    #thirdbox {
        position: absolute;
        top: 4240px;
        left: 730px;
        }
        #content h1 {
            margin: 0 0 25px 0;
            font-size: 60px;
            font-family: Helvetica, sans-serif;
            font-weight: bold;
            line-height: 65px;
            }
    #fourthbox {
        position: absolute;
        top: 6360px;
        left: 730px;
        }
        p.whitetext{
            color:#fff;
            }
#parallax-bg3 {
z-index: 3;
position: fixed;
top: 0;
left: 50%;
height: 1080px;
width: 100%;
max-width: 1920px;
margin-left: -960px;
}
#bg3-1 {
    position: absolute;
    top: 0px;
    }
#bg3-2 {
    position: absolute;
    top: 1060px;
    }
#bg3-3 {
    position: absolute;
    top: 2120px;
    }
#bg3-4 {
    position: absolute;
    top: 3180px;
    }

和parallax.js：

$(document).ready(function() {

redrawDotNav();

/* Scroll event handler */
$(window).bind('scroll',function(e){
    parallaxScroll();
    redrawDotNav();
});

/* Next/prev and primary nav btn click handlers */
$('a.firstbox').click(function(){
    $('html, body').animate({
        scrollTop:0
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});
$('a.secondbox').click(function(){
    $('html, body').animate({
        scrollTop:$('#secondbox').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});
$('a.thirdbox').click(function(){
    $('html, body').animate({
        scrollTop:$('#thirdbox').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});
$('a.fourthbox').click(function(){
    $('html, body').animate({
        scrollTop:$('#fourthbox').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});

/* Show/hide dot lav labels on hover */
$('nav#primary a').hover(
    function () {
        $(this).prev('h1').show();
    },
    function () {
        $(this).prev('h1').hide();
    }
);

});

/* Scroll the background layers */
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.5))+'px');
}

/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top =  0;
// The top of each section is offset by half the distance to the previous section.
var section2Top =  $('#secondbox').offset().top - (($('#thirdbox').offset().top - $('#secondbox').offset().top) / 2);
var section3Top =  $('#thirdbox').offset().top - (($('#fourthbox').offset().top - $('#thirdbox').offset().top) / 2);
var section4Top =  $('#fourthbox').offset().top - (($(document).height() - $('#fourthbox').offset().top) / 2);;
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
    $('nav#primary a.firstbox').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
    $('nav#primary a.secondbox').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
    $('nav#primary a.thirdbox').addClass('active');
} else if ($(document).scrollTop() >= section4Top){
    $('nav#primary a.fourthbox').addClass('active');
}

}

Answer 1

我認為您需要為每個圖像使用包裝div，並在div上使用視差，而不是圖像本身。 檢查這里http://teamideas.pt ，這是我使用stellar.js構建的視差效果網站。