网页设计案例鉴赏：如何设计出潮爆的视差滚动网页

要想网站看起来很Cool，很Chock，你可能需要添加很多设计效果和技巧。其实，视差滚动效果同样能制作出这种效果的网站。不信?Inspirr Creation就为你整理一些视差滚动的网页设计，相信你看完之後同样能制作出创意满满的潮爆网站。

网站设计欣赏一：Every Last Drop

Every Last Drop是一个旨在呼吁节约水资源的环保网站。设计师以等比例分割页面进度条，当页面向下滚动时，网站会展示各种在不同生活场景的用水方式和用水情况等。每个场景切换都带有动画视差效果，而在「Universe」页面更增加了3D视差滚动效果。

网站设计欣赏二：Hobolobo

Hobolobo采用的是水平视差滚动效果，与其它网站不同，Hobolobo更适用於触摸设备，当你滑动触摸屏时，页面就会从左到右移动，用讲故事的方式为你呈现页面的内容。这个网站完全采用漫画形式，最令人关注且最惊艳的地方就是它的3D视差效果。

网站设计欣赏三：Firewatch

Firewatch是一个类似荒野冒险的网站。Firewatch的视差效果仅在第一个页面上使用，当页面滚动时，元素会向上推进，营造一种3D效果。其他页面则是静态页面，方便用户浏览网站的信息。

网站设计欣赏四：Peugeot

Peugeot是一个非常Cool的网站，利用视差滚动的方式为用户自动播放漫画故事，同时还会根据故事情节采用水平或垂直两种方式展现，根据就像真的在看一本漫画一样。

网站设计欣赏五：The Boat

The Boat一共有6章，通过将故事的形式，以视差幻灯片的形式演示了各个不同的情节，而这种移动视差层也有利於创造深度感。

网站设计欣赏六：Assemble

Assemble是一个免费的在线作品集网站，网站提供18个作品集主题供用户选择，这些主题采用网格结构排列的形式，当页面向下滚动时，主题会一次展示，并伴随轻微的跳动载入。

网站设计欣赏七：Youandigraphics

Youandigraphics是一个完全将设计理念变化现实的响应式网站，虽然这个网站的视差并不是很强，只是单击按钮时，不同元素会以反方向移动，形成简单的视差效果，但适用於各种类型和各种尺寸的设备。

网站设计欣赏八：Bagigia

Bagigia是一个关於热水袋展示的网站，当网页向下滚动时，网页页面会像幕布一样升上去，切换到可爱热水袋的页面，整个网站视差效果几乎集中在第一页。滚动时，底部还有一个「拉链」进度条，从左向右移动，非常生动。

网站设计欣赏九：Putzengel

Putzengel网站的每一个页面就是我们日常生活中做清洁的场景，当向下滚动鼠标时，会议视差滚动的方式连续显示6个页面，而且每个页面的动画都非常不错，尤其是垃圾自动进入垃圾桶的动画，能令人深思。

网站设计欣赏十：Lost Worlds Fairs

Lost Worlds Fairs并不是一个典型的视差滚动效果网站，但却极富趣味性。当鼠标滚动是，卡通人物会进入神秘的管道，管道上有无数的窗口，让该人物在页面滚动时看到不同的场景。

视差滚动效果是网页设计的创新技术，这除了需要强大的前端技术支持外，更多的是讲究设计师的创意发挥。想要设计出潮爆的视差滚动网站，就要发挥设计师的小宇宙，释放自己的灵感，这样的网页设计才能给用户留下深刻的印象。