首页 > 代码库 > 滚动视差
滚动视差
今天在进行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/
希望能帮到你~感谢阅读~
滚动视差
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。