1.視差滾動

視差滾動（Parallax Scrolling）指網頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網頁展示技術。

2.特性

視差滾動效果酷炫，適合於個性展示的場合。

視差滾動徐徐展開，適合於娓娓道來，講故事的場合。

視差滾動容易迷航，需要具備較強的導航功能。

3.原理

傳統的網頁的文字、圖片、背景都是一起按照相同方向相同速度滾動的，而視差滾動則是在滾動的時候，內容和多層次的背景實現或不同速度，或不同方向的運動。

有的時候也可以加上一些透明度、大小的動畫來優化顯示。

4.實現

4.1簡單實現

利用background-attachment屬性實現。

預設情況下，此屬性取值scroll，頁面滾動時，內容和背景一起運動，如果取值fixed，背景相對瀏覽器固定。借用Alloy Team的博文《視差滾動的愛情故事》的圖片和背景，來看看效果。

<div class="article section1">  
     每當我加班凌晨，獨自一人走在黑暗的回家路上  
</div>  
<div class="article section2">  
     我會想起那天夕陽下的奔跑  
</div>  
<div class="article section3">  
     那是我逝去的，青春  
</div>  
 

css非常簡單

/*統一設定背景的background-attchment屬性*/  
.article{  
    width: 960px;  
    margin: 0 auto;  
    height: 800px;  
    padding: 40px;  
    font: 24px/1.5 'Microsoft YaHei';  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: center center;  
    background-size: cover;  
    line-height:400px;  
}  
/*分別給每個部分設定不同的背景和顏色*/  
.section1{  
       color: white;  
       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);  
}  
.section2{  
       color: #FF8500;  
       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);  
}  
.section3{  
       color: #747474;  
       background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);  
}  
 

4.2 加上動畫的效果

上面的效果略顯呆板，我們在頁面滾動的時候，給文字加點動畫，看效果。我們來偵聽一下scroll事件，當頁面滾動某個地方時()，我們給元素新增動畫。

var articleHeight =800;  
var section1 = document.getElementById('section1'),  
section2 = document.getElementById('section2'),  
section3 = document.getElementById('section3');  
window.addEventListener('scroll',scrollHandler);  
  
function scrollHandler(e){  
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    if(scrollTop > 0 && scrollTop < articleHeight){  
        section1.classList.add('anim');  
    }else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){  
        section2.classList.add('anim');  
    }else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){  
        section3.classList.add('anim');  
    }  
}  

html和css也要進行一些修改

/*統一設定背景的background-attchment屬性*/  
.article{  
    width: 960px;  
    margin: 0 auto;  
    height: 800px;  
    padding: 40px;  
    background-repeat: no-repeat;  
    background-attachment: fixed;  
    background-position: center center;  
    background-size: cover;  
        font: 24px/1.5 'Microsoft YaHei';  
        line-height:400px;   
        text-indent:-25em;  
}  
/*分別給每個部分設定不同的背景和顏色*/  
.section1{  
        color: white;  
        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);  
}  
.section2{   
        color: #FF8500;  
        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);  
}  
.section3{   
        color: #747474;  
        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);  
}  
.anim{  
       -webkit-transition : all 1s ease-in;  
       -moz-transition : all 1s ease-in;  
       -ms-transition : all 1s ease-in;  
       transition : all 1s ease-in;  
       text-indent:3em;  
}  

4.3 背景運動

剛剛兩個情況只是背景保持fixed的狀態，我們可以給包括背景在內的多層次元素新增運動，從而實現視差滾動。多背景時，需要確保上面的背景是透明的。看看nettuts上的一個效果，研究研究，看看實現過程。

html檔案裡面使用了data-speed和data-type向js裡傳遞引數。

<!-- Section #1 -->  
<section id="home" data-speed="10" data-type="background">  
  <article>I am Absolute Positioned</article>  
</section>  
<!-- Section #2 -->  
<section id="about" data-speed="4" data-type="background">  
  <article>Simple Parallax Scroll</article>  
</section>  

CSS檔案

#home {  
    background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/home.jpg) 50% 0 no-repeat fixed;  
    height: 1000px;  
    margin: 0 auto;  
    width: 100%;  
    max-width: 1920px;  
    position: relative;  
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);  
}  
#about {  
    background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/about.jpg) 50% 0 no-repeat fixed;  
    height: 1000px;  
    margin: 0 auto;  
    width: 100%;  
    max-width: 1920px;  
    position: relative;  
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);  
}  
/* Introduction */  
 #home article {  
    background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/intro.png") no-repeat scroll center top transparent;  
    height: 458px;  
    position: absolute;  
    text-indent: -9999px;  
    top: 291px;  
    width: 100%;  
}  
#about article {  
    background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/parallax.png") no-repeat scroll center top transparent;  
    height: 458px;  
    position: absolute;  
    text-indent: -9999px;  
    top: 291px;  
    width: 100%;  
}  

javascript，這裡用到了jquery

$(document).ready(function () {  
    // Cache the Window object  
    $window = $(window);  
   
    $('section[data-type="background"]').each(function () {  
        var $bgobj = $(this); // assigning the object  
   
        $(window).scroll(function () {  
   
            // Scroll the background at var speed  
            // the yPos is a negative value because we're scrolling it UP!                                
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));  
   
            // Put together our final background position  
            var coords = '50% ' + yPos + 'px';  
   
            // Move the background  
            $bgobj.css({  
                backgroundPosition: coords;  
            });  
        }); // window scroll Ends  
    });  
});  

感謝閱讀，希望可以為您帶來些許幫助！