视差滚动原理及实现

作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。

1.视差滚动

视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。国内外的设计师们实现了很多酷炫的效果，大家请移步欣赏，《14个超棒的带有故事趣味性视差滚动网站》、《17 Inspiring Examples of Parallax Scrolling Sites》、《18 Beautiful Examples of Parallax Scrolling in Web Design》。

2.特性

视差滚动效果酷炫，适合于个性展示的场合。

视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。

视差滚动容易迷航，需要具备较强的导航功能。

3.原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。

有的时候也可以加上一些透明度、大小的动画来优化显示。

4.实现

4.1简单实现

利用background-attachment属性实现。

background-attachment: fixed || scroll || local

默认情况下，此属性取值scroll，页面滚动时，内容和背景一起运动，如果取值fixed，背景相对浏览器固定。借用Alloy Team的博文《 视差滚动的爱情故事》的图片和背景，来看看 效果。

[html] view plain copy

1. <div class="article section1">  
2.      每当我加班凌晨，独自一人走在黑暗的回家路上  
3. </div>  
4. <div class="article section2">  
5.      我会想起那天夕阳下的奔跑  
6. </div>  
7. <div class="article section3">  
8.      那是我逝去的，青春  
9. </div>  

css非常简单，

[css] view plain copy

1. /*统一设置背景的background-attchment属性*/  
2. .article{  
3.     width: 960px;  
4.     margin: 0 auto;  
5.     height: 800px;  
6.     padding: 40px;  
7.     font: 24px/1.5 'Microsoft YaHei';  
8.     background-repeat: no-repeat;  
9.     background-attachment: fixed;  
10.     background-position: center center;  
11.     background-size: cover;  
12.     line-height:400px;  
13. }  
14. /*分别给每个部分设置不同的背景和颜色*/  
15. .section1{  
16.        color: white;  
17.        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);  
18. }  
19. .section2{  
20.        color: #FF8500;  
21.        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);  
22. }  
23. .section3{  
24.        color: #747474;  
25.        background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);  
26. }  

4.2 加上动画

上面的效果略显呆板，我们在页面滚动的时候，给文字加点动画， 看效果。我们来侦听一下scroll事件，当页面滚动某个地方时()，我们给元素添加动画。

[javascript] view plain copy

1. var articleHeight =800;  
2. var section1 = document.getElementById('section1'),  
3. section2 = document.getElementById('section2'),  
4. section3 = document.getElementById('section3');  
5. window.addEventListener('scroll',scrollHandler);  
6.   
7. function scrollHandler(e){  
8.     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
9.     if(scrollTop > 0 && scrollTop < articleHeight){  
10.         section1.classList.add('anim');  
11.     }else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){  
12.         section2.classList.add('anim');  
13.     }else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){  
14.         section3.classList.add('anim');  
15.     }  
16. }  

html和css也要进行一些修改

[css] view plain copy

1. /*统一设置背景的background-attchment属性*/  
2. .article{  
3.     width: 960px;  
4.     margin: 0 auto;  
5.     height: 800px;  
6.     padding: 40px;  
7.     background-repeat: no-repeat;  
8.     background-attachment: fixed;  
9.     background-position: center center;  
10.     background-size: cover;  
11.         font: 24px/1.5 'Microsoft YaHei';  
12.         line-height:400px;   
13.         text-indent:-25em;  
14. }  
15. /*分别给每个部分设置不同的背景和颜色*/  
16. .section1{  
17.         color: white;  
18.         background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);  
19. }  
20. .section2{   
21.         color: #FF8500;  
22.         background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);  
23. }  
24. .section3{   
25.         color: #747474;  
26.         background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);  
27. }  
28. .anim{  
29.        -webkit-transition : all 1s ease-in;  
30.        -moz-transition : all 1s ease-in;  
31.        -ms-transition : all 1s ease-in;  
32.        transition : all 1s ease-in;  
33.        text-indent:3em;  
34. }  
35.       

4.3 背景运动

刚刚两个情况只是背景保持fixed的状态，我们可以给包括背景在内的多层次元素添加运动，从而实现视差滚动。多背景时，需要确保上面的背景是透明的。看看nettuts上的一个 效果，研究研究，看看实现过程。

html文件里面使用了data-speed和data-type向js里传递参数。

[html] view plain copy

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

CSS文件，

[css] view plain copy

1. #home {  
2.     background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/home.jpg) 50% 0 no-repeat fixed;  
3.     height: 1000px;  
4.     margin: 0 auto;  
5.     width: 100%;  
6.     max-width: 1920px;  
7.     position: relative;  
8.     box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);  
9. }  
10. #about {  
11.     background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/about.jpg) 50% 0 no-repeat fixed;  
12.     height: 1000px;  
13.     margin: 0 auto;  
14.     width: 100%;  
15.     max-width: 1920px;  
16.     position: relative;  
17.     box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);  
18. }  
19. /* Introduction */  
20.  #home article {  
21.     background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/intro.png") no-repeat scroll center top transparent;  
22.     height: 458px;  
23.     position: absolute;  
24.     text-indent: -9999px;  
25.     top: 291px;  
26.     width: 100%;  
27. }  
28. #about article {  
29.     background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/parallax.png") no-repeat scroll center top transparent;  
30.     height: 458px;  
31.     position: absolute;  
32.     text-indent: -9999px;  
33.     top: 291px;  
34.     width: 100%;  
35. }  

javascript，这里用到了jquery

[javascript] view plain copy

1. $(document).ready(function () {  
2.     // Cache the Window object  
3.     $window = $(window);  
4.    
5.     $('section[data-type="background"]').each(function () {  
6.         var $bgobj = $(this); // assigning the object  
7.    
8.         $(window).scroll(function () {  
9.    
10.             // Scroll the background at var speed  
11.             // the yPos is a negative value because we're scrolling it UP!                                
12.             var yPos = -($window.scrollTop() / $bgobj.data('speed'));  
13.    
14.             // Put together our final background position  
15.             var coords = '50% ' + yPos + 'px';  
16.    
17.             // Move the background  
18.             $bgobj.css({  
19.                 backgroundPosition: coords;  
20.             });  
21.         }); // window scroll Ends  
22.     });  
23. });  

5.教程、插件、欣赏

请大家参阅一下资源

懒人素材的《 如何构建一个视差滚动网站HTML5》

Alloy Team的《 视差滚动的爱情故事》

RIA Coder的《 Edge Animate十分钟零代码实现HTML5视差滚动效果》

codrops的《 PARALLAX SLIDER WITH JQUERY》

《 16个最棒的jQuery视差滚动效果教程》

优设《 让网页舞动起来！25个免费的视差滚动插件》

W3Cplus《 10个优秀视差滚动插件》

设计达人《 30+漂亮的视差滚动网页设计欣赏》

W3Cfun《 带给你完美体验的23个视差滚动插件》

本博客的另一篇文章《 18佳使滚动技术更上层楼的网站》

完工！

感谢阅读，希望可以为您带来些许帮助！