视差滚动学习笔记（1）：整屏滚动

 

转载请注明出处： 猩猩队长 » http://www.cnblogs.com/wayns/p/parallax_study_page_scroll.html 

 

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为2014年网页设计的热点趋势，越来越多的网站应用了这项技术。2014年网页设计十大热门趋势

这里有一些在awwwards上获奖的作品：http://www.awwwards.com/websites/parallax/

学习资料：http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/

 

看了很多滚动视差的作品，我被它的惊艳给折服了，以至于我自己也想尝试做一个玩玩。

在我自己心里设计的滚动视差作品呢，我想要做的是整屏滚动的那种，滚一下就整个页面切换，再开始下一个页面的视差动作。（大致是酱紫，感觉自己说得乱七八糟的）

我觉得这是一篇关于整屏滚动的文章，好像与滚动视差没半毛钱关系。说白了也就是自己练练手，顺便分享给大家，呵呵！

 

首先说说滚动屏幕，使用JS滚动屏幕有好几种实现方式，小弟不才，也就介绍2种，希望有更多方法的朋友可以回复我让我记录积累，谢谢。

window.scroll(x,y);//页面滚动到坐标（x,y）

document.body.scrollTop = y;//通过设置body的scrollTop值实现滚动

 

第一版：

  我们先使用document.body.scrollTop实现切换屏幕 DEMO 源码

  大家可以看到，这里勉强是实现的整屏滚动，但是滚动屏幕时切换不平滑，都是一闪就换。

  作为一名强迫症患者，我是不允许这样子就罢了的，现在我们想要滚动的时候缓慢的切换。

第二版：(慢动作切换)

  使用window.scroll(0,y)实现纵向滚动，配合setInterval函数实现慢动作切换 DEMO 源码

  实现原理是通过计算向上滚还是向下滚的下一个section的offsetTop值，来确定要滚动到哪个位置。

  当开始滚动的时候也就是当前位置离目标位置最远的时候，滚动速度最快，

  当屏幕越来越接近目标位置的时候越来越慢，最后结束滚动。

 

这里没有测试兼容性，只在chrome和Firefox试过。

有什么问题欢迎讨论