转载请注明出处: 猩猩队长 http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为2014年网页设计的热点趋势,越来越多的网站应用了这项技术。http://www.awwwards.com/top-10-web-design-topics-of-2014.html
这里有一些在awwwards上获奖的作品:http://www.awwwards.com/websites/parallax/
学习资料:http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/
看了很多滚动视差的作品,我被它的惊艳给折服了,以至于我自己也想尝试做一个玩玩。
在我自己心里设计的滚动视差作品呢,我想要做的是整屏滚动的那种,滚一下就整个页面切换,再开始下一个页面的视差动作。(大致是酱紫,感觉自己说得乱七八糟的)
我觉得这是一篇关于整屏滚动的文章,好像与滚动视差没半毛钱关系。说白了也就是自己练练手,顺便分享给大家,呵呵!
首先说说滚动屏幕,使用JS滚动屏幕有好几种实现方式,小弟不才,也就介绍2种,希望有更多方法的朋友可以回复我让我记录积累,谢谢。
1 window.scroll(x,y);//页面滚动到坐标(x,y) 2 3 document.body.scrollTop = y;//通过设置body的scrollTop值实现滚动
第一版:
我们先使用document.body.scrollTop实现切换屏幕 DEMO 源码
大家可以看到,这里勉强是实现的整屏滚动,但是滚动屏幕时切换不平滑,都是一闪就换。
作为一名强迫症患者,我是不允许这样子就罢了的,现在我们想要滚动的时候缓慢的切换。
第二版:(慢动作切换)
使用window.scroll(0,y)实现纵向滚动,配合setInterval函数实现慢动作切换 DEMO 源码
实现原理是通过计算向上滚还是向下滚的下一个section的offsetTop值,来确定要滚动到哪个位置。
当开始滚动的时候也就是当前位置离目标位置最远的时候,滚动速度最快,
当屏幕越来越接近目标位置的时候越来越慢,最后结束滚动。
这里没有测试兼容性,只在chrome和Firefox试过。
有什么问题欢迎讨论