首页 > 代码库 > 滚动视差

滚动视差

  今天在进行FCC的第二个课程挑战时,发现页面的背景随着鼠标滚动,有一种像翻页一样的切换效果,看了之后虎躯一震,这是什么新奇玩意儿???立马在网上进行搜索,最后得到的结果----视差滚动。

  这东西看着挺有意思,但实现原理还是挺简单的。就是把背景的background-attachment属性设置成fixed。固定之后,背景不会跟随滚动移动,所以下一页的背景上来的时候,就出现了一种覆盖效果。

  另外,还可以通过js,控制不同背景的滚动速度,来达到一种3D效果。

  现在越来越多的单页设计,也让视差滚动的应用越来越广,视差滚动配合JS动画,再加上优秀的文字说明,可以强烈的吸引人的眼球,不管人家对你产品感不感兴趣,至少,记住你的网页了,这就达到了应有的效果~

  我自己做的效果codepen

  别人家的视差滚动http://jonathannicol.com/projects/parallax-scrolling/#about

  这个就非常酷炫了,它用到了路径变动,今天的我是还不会的了,过几天的吧。http://browser.qq.com/index_m.html

  需要更详细的了解,移步http://www.alloyteam.com/2014/02/optimized-articles-of-parallax-scrolling-love-story/

  希望能帮到你~感谢阅读~

  

 

滚动视差