人人网 6.0 版申请页面随着滚动条拖动背景图片滚动出现的原理

第一步是考虑静态实现。整个页面分成几大块，比如：

<div class="section" id="topic-a"></div>

<div class="section" id="topic-b"></div>

<div class="section" id="topic-c"></div>

 

每个div.section有个背景图，同时根据设计需要嵌套多个背景图层，就像：

<div class="section" id="topic-a">

   <div class="content">这里放内容</div> 

   <div class="bg1"></div>

   <div class="bg2"></div>

</div>

nike那个只有一个和section的背景组合。renren是多个。每个内嵌的背景图层的background-attachment一定要设为fixed。这样基本效果就出来了。

 

我认为nike那个比renren好的在于，每个div.section的背景的background-attachment有的也设为fixed（要设计一个更大的背景图），这样配合后面javascript营造出的前景、背景不同移动速率的效果会更有动感。

 

第二步做出更动感的效果，这就要靠javascript了。基本原理就是重庆尿结石的治疗滚动时调整嵌套背景图层的background-position的y轴值。难点在于节奏感要对。renren的应该是绑在mousewheel事件上，利用返回的值，调整背景图的y值。我更喜欢nike的做法，它是绑在onscroll事件上，不用引额外的mousewheel插件，判断当前div.section的offset，调整背景图的y值，通过调整计算公式，可以让这种快慢的感觉更强一些。

 

 

原理其实挺简单。关键要把这种感觉做出来，里面的细节还是很多的。另外，应该把background-size也加上，这样改变窗口大小时更完美。

推荐个我的51博客——君射臣决 - http://5078742.blog.51cto.com/