如何制作视差滚动网页

1、“差异滚动分层视差，增加场景立体感”

空间感可以说视差滚动最重要的体现，是通过各个不同元素位置变化的速度不同，形成层次错落的感觉，不同的空间角度和用户体验，带来三位空间感。结合游戏产品能将游戏中的场景，利用视差滚动展示在网站中，带来立体感。比起单纯的图片，更能吸引用户。

2、“合理分块，清晰划分信息点”

从上面的三个视差网站，都一个共同的特点，就是信息划分十分清晰。第一屏将最关键的信息展示用标题展示，之后每一屏都有各自的信息点，均是对应产品、游戏推广的亮点。如手机将军令首页，依次的主题是安全密码、角色离线和锁定账号、手机即可绑定、免费、下载手机将军令。而且每一块对应都有效果在旁展示，十分生动。

3、“从上到下形成故事性感觉”

 形成故事感这个特点，暂时在我们公司的网站中体现得还不太够。从国外流行的网站中，不少是利用故事情节或者逻辑方式层层推进式，将视差滚动串联起来。这一点我个人觉得很适合我们的游戏产品，现在游戏中不少是讲求剧情的。当网站拥有的剧情，能吸引用户往下滚动，不同提供新信息，而最后一屏可以说是临门一脚，当之前的推销完成后，用户是否有冲动试用呢？所以通常最后一屏是留给产品下载的入口和相关的链接。

1、“CCS3实现”

单纯用CSS3来实现，优点是开发时间短、性能和开发效率都比较好，但是缺点是无法兼容低版本的浏览器。

2、“JQuery实现”

用JS或JQuery，按照视差的原理，控制三个层不同的滚动速度，计算每层滚动时间，控制滚动的效果。优点是能兼容各个版本且效果可控性更好，但开发起来对制作者的要求相应高。

3、“插件实现方式”

网上有不少成熟的视差滚动的插件，如parallax-scrolling/，该插件适兼容性十分好。