如何制作视差滚动网页

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

操作前的准备

视差滚动作用

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

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

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

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

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

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

视差滚动制作原理

“CCS3实现”

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

“JQuery实现”

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

“插件实现方式”

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

用户类似问题：

问题1：JS或JQ视差滚动怎样做?

jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 ... >>详细

问题2：如何实现视差滚动效果的网页

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 “差异滚动分层视差，增加场景立体感” 空间感可以说视差滚动最重要的体现，是通过各个不同元素位置变化的速度不同，形成层次错落的... >>详细

问题3：如何实现视差滚动效果的网页

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚... >>详细

问题4：视差滚动效果设计的网页跟传统的点击样式对比有何优势

Parallax Scrolling，从字面上严格的讲其实应该是指一个页面的内容被分成几个不同层分布在不同的 z depth 上，所以就像坐在火车上看窗外，最近的景色移动得最快，远处的移动的很缓慢。 这样做主要的目的（我的揣测）是为了让内容本身有丰富的层... >>详细

问题5：视差滚动网页

视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。一般把网页解剖为：背景层、内容层和悬浮层(贴图层)。当滚动鼠标滚轮的时候，各图层以不同速度移动，形成视差的效果。这就是时差滚... >>详细