如何制作视差滚动网页

视差滚动”曾经是网站最流行的设计方式之一，从专业技术方面，是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。视差滚动就是给人带来直观简洁的视觉冲击。

工具/原料

网站编辑器

Photoshop

Chrome浏览器

视差滚动作用

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

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

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