滚动视差

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动视差相关的知识,希望对你有一定的参考价值。

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

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

  

 

以上是关于滚动视差的主要内容,如果未能解决你的问题,请参考以下文章

使用CSS和JavaScript创建基本的视差滚动效果

滚动视差?CSS 不在话下

视差滚动原理与实现

告诉 UIPageViewController 何时滚动(用于图像的视差滚动)

基于Vue实现商城详情页“视差滚动”效果

视差滚动