parallax视差网页制造3d效果

前几天看到parallax视差网页的例子：http://f6design.com/projects/parallax-scrolling/感觉非常有意思，就了解了一下，发现实现起来还是很简单的, 原文解释在这个链接里http://f6design.com/journal/2011/08/06/build-a-parallax-scrolling-website-interface-with-jquery-and-css

基本的概念就是设置好几个背景，当用户滚动页面的时候，这几个背景的滚动速度稍微不同，这样就造成3d的效果。

首先设置一个wrapper：

/* foreground (ballons/landscape) */
#parallax-bg3 {
    z-index: 3;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 940px;
    margin-left: -470px; /* move left by half element's width */
}

在这个wrapper里设置几个背景

#bg3-1 {
    position: absolute;
    top: -111px;
    left: 355px;
}
#bg3-2 {
    position: absolute;
    top: 812px;
    left: 321px;
}

最后当scroll的时候设置不同的速度

$(window).bind('scroll',function(e){
    parallaxScroll();
});
 
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*.75))+'px');
}