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

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

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

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

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

在对设计稿分层时，设计者要定位好背景层，贴图层和内容层之间的关系。
根据页面自身的功能来定义是否需要贴图层
贴图层的存在是为了更有效的传达视觉效果，但如果它成为了干扰，就会违背了我们使用的初衷
内容层的展现是最主要的，无论背景层和贴图层有多少花哨，在设计师设计过程中，内容层对用户的展示是最优先的。

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

举几个典型的栗子：

例如spotify的官网https://www.spotify.com/int/

网站从Listen everywhere（随处可听）、Search & discover（搜索与探索）、Build your collection（建立你的收藏）、Follow & share（关注和分享）、Radio（电台）这五个纬度来介绍spotify这个音乐产品。运用合适的背景图片营造五个场景，介绍产品的五种特性。设计 者将网页分为内容层和背景层上下两层，运用滚动时的速率差异形成滚动视差。一屏一个场景，也可以称为一个画面，五个场景相互独立，通过纵向的滚屏来实现切换。

再如：http://www.ok-studios.de/home/

这个网站设计者也是采用多场景式，将网页横向分割成多个场景，场景与场景之间通常颜色区分很明显，用以分割场景。场景内设计者将近景的部分做了高斯 模糊，从而巧妙的形成了景深视觉效果。在技术实现上，除了利用了不同分层滚动速率不一样外，还限定了相应元素的显示范围。滚动时超出范围的部分会隐藏掉， 形成被遮挡的视觉上的分层效果。

再来看看这个网站：http://www.zensorium.com/tinke/

这是一个产品的介绍网站，设计者非常有意思，以多场景的形式介绍了产品的几大功能，同时在这个过程中又以产品本身为线索贯穿所有的场景。有点像是故事型和多场景型的结合。

从几个例子中我们不难总结出这类滚动视差网站的特点。