页面滚动背景图片不动的原理及实现

以前看到一种页面滚动条在滚动，而背景图片却不动的效果，页面缓缓的下拉，背景也缓缓的切换，就像放电影一样，后来才知道这叫视差滚动（Parallax Scrolling），作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的 2014 年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。
原文出处：http://blog.csdn.net/chenlycly/article/details/25046969

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 的博文《视差滚动的爱情故事》的图片和背景，来看看效果。

  <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 id="home"  data-speed="10"  data-type="background"> 
  <article> I am Absolute Positioned </article> </section>      
<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  });  });