滚动视差

Posted 2020-08-26

　　今天在进行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/

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