Javascript 如何对看似“固定”的图像使用视差滚动？

How to use parallax scrolling with seemingly "fixed" images?

提问by Craig

I'm working with parallax scrolling and currently have a setup such that my background images scroll at 50% of normal content scrolling speed. See here: www.jurbs.com. (Content is optimized in Chrome and Opera)

我正在使用视差滚动，目前有一个设置，使我的背景图像以正常内容滚动速度的 50% 滚动。请参见此处：www.jurbs.com。（内容在 Chrome 和 Opera 中优化）

Ideally, what I would like is for there to be no scroll in the images at all, but as the content scrolls, the image visibility slides and progresses accordingly. Examples of this can be seen here: www.tooyoungtowed.org.

理想情况下，我想要的是图像中根本没有滚动，但是随着内容的滚动，图像可见性会相应地滑动和进展。这方面的例子可以在这里看到：www.tooyoungtowed.org。

Here is the relevant CSS:

这是相关的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;
    }

And parallax.js:

和 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');
}

}

回答by riverstorm

I think you need to use a wrapper div for each image, and use the parallax on the div, not the image itself. Check here http://teamideas.pt, it′s a website I've built using stellar.jsfor the parallax effect.

我认为您需要为每个图像使用包装器 div，并在 div 上使用视差，而不是图像本身。在这里查看http://teamideas.pt，这是我使用stellar.js为视差效果构建的网站。