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

来源：上海天琥设计培训学校时间：2018/12/20 11:11:59

背景层的滚动(最慢)

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

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

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

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

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

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

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

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

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

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

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

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