网页特效设计之滚动视差设计指南发布者：本站     时间：2022-01-19 14:01:34

作为未来网页设计的热点趋势之一的“滚动视差”在近年来被越来越多网站所采用，特殊新颖的展示模式也让许多用户眼前一亮。网络上也如雨后春笋一般出 现了很多像《30个让人兴奋的视差滚动网站》、《60个视差滚动网站赏析》……等一系列的视差滚动的文章，不过赏析的居多，真正指导设计师如何去设计，如 何去实现的实用型文章却很少。于是萌发了自己写一篇的想法，与感兴趣的人共同交流下滚动视察设计时的一些心得。

什么是滚动视差?

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

视差效果，原本是一个天文学术语，当我们观察星空时，离我们远的星星移动速度较慢，离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时，也会有这样的感觉，远处的群山似乎没有在动，而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素 在滚动屏幕时发生的位置的变化，然而各个不同的元素位置变化的速度不同，导致网页内的元素有层次错落的错觉，这和我们人体的眼球效果很像。我看到多家产品 商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。

看似复杂其实这个早就不是什么新鲜事儿，这种设计思路早在80年代的小霸王学习机上就见过。

网页<a href=/photoshop/texiao/ target=_blank class=infotextkey>特效</a>设计之滚动视差设计指南,PS教程,

在这个画面里通过人物马里奥、前景、背景着三个部分的移动速率的不同来实现立体效果。类比网页也是如此。一个滚动视察的网站至少会有以下几层 ：背景层，内容层，贴图层。

背景层的滚动(最慢)

贴图层(内容层和背景层之间的元素)的滚动(次慢); 按照现实生活的经验，越远的景物移动越慢。

内容层的滚动(可以和页面的滚动速度一致) 。

我们让三个图层的滚动速度不一致，就做出了简单的差异滚动效果。

当然这只是实现了简单的滚动视差效果，距离一个好的滚动视察网站还不够。

我们来分析一些国外的例子看看他们是怎么做的。


来看看这个马里奥赛车的网站：

网页特效设计之滚动视差设计指南,PS教程,

在这个网站里○1是背景层，是一条赛道，在整个网站中贯穿整站起到线索的作用，让上一个画面与下一个画面之间有所关联。视差滚动也是沿着这条公路进 行的。○2、○3是贴图层，在画面中起到渲染氛围的作用，一个是远景一个是近境，滚动时速率也不一样，从而让人有一种此时不是在浏览网页，而是在赛道上驰 骋的代入感。○4是内容层，网站有趣的同时不忘内容的呈现。○5是所在位置的导航，往往滚动视差的网站都很长有很多屏，所以导航是必不可少的。让用户知道 自己到了哪儿还剩多少，这很重要，并且也起到一个导航的作用便于用户返回看之前的内容。

再来看看 http://intacto10years.com/index_start.php 这个网站。

网页特效设计之滚动视差设计指南,PS教程,

这个网站以一开始加载完成之后会跳转到页面的最底部，火箭为载体，以遨游太空为故事背景。随着火箭的升空页面逐渐向上滚动，随之以场景化的手段，形象的讲述了intacto 从2001年到2012 年10年的历程。很是生动有趣。

还有类似的这个网站http://lostworldsfairs.com/atlantis/

网页特效设计之滚动视差设计指南,PS教程,

这个网站巧妙的将网页的向下滚动转化为了一次奇妙的深海遨游。导航化为深度标尺，随着网页的滚动小人逐渐向深海下沉，也逐渐在深海种看到了众多不同的“景观”，很是有趣。

这三个例子是因为他们有共通性，代表了一类的滚动视差网站的手法。

网页特效设计之滚动视差设计指南,PS教程,

这类网站将原有枯燥的内容进行重新整理，将其故事化场景化。这就需要设计者有一个清晰的讲故事的逻辑。

需要有一个视觉引导元素贯穿整站，就像马里奥的赛道，intacto的宇宙飞船，潜水的管道以及小人。这个视觉引导会让你在场景种有个代入感。仿佛你就随着这个引导元素来体验整个故事。

在对设计稿分层时，设计者要定位好背景层，贴图层和内容层之间的关系。

根据页面自身的功能来定义是否需要贴图层

贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷

内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的。

当然这类设计滚动视差网站的最大难点在于故事化上，也许会有人问：“我要设计的网站内容很难故事化怎么办?”那么我再给大家讲解另外一种滚动视差常见的设计手法。相对于“故事化”我将它称为“多场景化”。