标签：des style blog http color io ar 使用 strong
转载请注明出处： 猩猩队长 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试过。
有什么问题欢迎讨论
标签：des style blog http color io ar 使用 strong
原文地址：http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html
