视差在目前看来仍然是最热门的网页设计趋势之一。当用户在滚动页面的同时，背景和前景以不同的速度移动，形成两个独立层在视觉上面时差的移动方式，这种动画滚动效果就会产生了。
这种效果几乎可以应用于任何类型的网站设计中，而且可以通过一种有趣的方式来创建和增加用户的参与。视差效果的好处在于你不必在设计的每一页都使用它们，通过视差滚动来优化主页是一个最普遍的来帮助推动用户实施行动或浏览页面的其他内容。
视差效果创造了元素之间的深度和距离，比其他一些技术更有意义，让用户觉得自己是设计的一部分。
缺点在于它们并不总是能够在移动设备上工作(但在本文结尾的教程中，也有一些变通方法)。
以下，我们将通过五个视差效果和样式来考虑在实际的网站建设项目中，你具体应该选择哪一类。
1.动画显示变化
使用视差效果来显示项目中元素的变化，运动的层次可以在时间、空间或位置上传递一段距离。
视差效果能够最好的展示改变，当它们被用于强调页面的内容时。
在上面Porsche Evolution的网页设计案例中，你可以发现随着时间的变化，背景和汽车的外形同样在发生变化(如果你把页面中的背景乐开启的话，音乐也会在根据时间发生改变)。
这个设计能够吸引用户继续滚动这个页面，因为好奇心驱使他们想看看接下来汽车会是什么样子。这项技术可以按时间顺序工作（如上图所示，也可以按时间倒序排列。让它发挥作用的关键是，这个网站在两个方向上都能工作——即使是音乐也可以——如果你向下滚动的话。
Sonance的设计使用视差来显示另一种变化——在整个设计过程中的位置变化。视差效果是网站整体导航模式的一部分，作为设计(位置)用户的整个体验过程中有一个提示。
2.鼓励滚动
视差可以帮助创建网页与用户之间的联系，因为它们可以鼓励用户继续滚动，以使用户与设计进行更长的交互。
许多具有视差效果的设计在页面上都包含了“滚动”指令或在主页上含有提示信息，以帮助鼓励用户从一开始就参与到互动中（《行尸走肉》的主页在上面的图片中包含了这条信息。）
《行尸走肉》在其网站设计中做了一些与普通视差效果不同的事情，以鼓励用户参与互动——滚动会让用户感觉自己在屏幕上移动，因为角色会在不同的漫画风格的面板中水平移动，而不是上下移动。
3.运动和颜色
使用视差滚动的最有趣的方法之一是将颜色合并到不同的内容“面板”中，以展示不同的元素或组合。色彩的变化或动画可以代表一些新的东西。
颜色同时也是一个吸引眼球的设计工具，可以帮助吸引用户。
在上面Werkstatt的设计中，元素和文本之间在最开始使用一个白色和灰色的轮廓，但是悬停动作使每个元素都有了色彩。效果的组合很好，因为其余的设计很简单，它鼓励用户与每个单独的元素交互。
Lois Jeans采用了另一种使用颜色的视差方法。每一种新颜色都突出了服装运动的不同部分——购物者可以在不同的自然环境元素下看到牛仔裤，包括火、空气、水和泥土。
4.让信息更容易消化
视差可以帮助使复杂的信息或沉重的文本块变得更小、更易读、更容易消化。当你想到移动文本时，实际的实践过程涉及到移动容器的类型，这是一个有趣的概念。
上面的例子展示了这个概念的两个不同的应用。
Melanie David在屏幕上写了一段很长的介绍。而左侧显示导航元素- About -你会注意到这一块是不移动的，而用户通过滚动，可以向下继续浏览右边的文本。当文本块结束时，页面的两端移动到下一节。对于比视觉内容区域更长的文本块来说，这是一个很好的解决方案。
Le Duc餐厅根据你阅读和订购食物的方式，在菜单的不同部分使用单独的块。动画很简单，有趣的鱼背景——它告诉用户一些关于餐厅的东西——并使菜单易于消化。
5.想象“数字”的现实
视差效果最大的用途之一是帮助用户可视化一些他们无法看到的东西。更多的设计是利用三维和视差动画结合创造更真实的体验。
这些3D设计往往更多出现在卡通风格类型的体验领域，如上面的Madwell。但当设计与一种特定类型的设备一起工作时，也会有更多的VR感觉。
The Seattle Space Needle的网站设计是另一个使用视差效应的典型例子，它已经存在了一段时间。它使用一种向上滚动的技术来模拟它将如何到达地标的顶部。
“视差”滚动在建筑物内部的天际线上移动，有一些动作信息和一个很棒的导航栏，可以显示出位置的高度。这个设计具有教育意义，富有冒险精神，并向用户展示了难以想象的东西。
6.一些关于视差效果的参考资源
你或许已经准备好为下一个网站设计项目创建视差效应了，这些教程和代码片段将帮助你在设计中添加一个适合的动画效果，通过他们可以帮助吸引用户并使他们保持停留更长的时间。
在添加视差效果之前，对你的用户和他们的首选项进行数据分析。你可以先在一个特定的页面中(比如主页)进行跟踪分析测试，看看它是否对你有效(增加了站点上的时间，提示它正在工作)。
· How to Create a Parallax Scrolling Effect：这是一篇w3schools的教程，教你如何创建一个移动的容器效果，并提供了如何使用媒体查询来在移动设备上获得类似效果的方法。
· Parallax Scrolling Website Demo：通过一个简单的演示和解释来帮助你掌握“视差”技巧。
· 15 Captivating Parallax Effects from CodePen：清单展示了一些很棒的视差效果，可以激发你的创造力。
总结
虽然视差效应是流行的和有趣的，但它们并不适用于每个项目。同样重要的是，一些设备的用户可能会在一个包含大量动画的网站上纠结。
在网页设计中添加视差效果之前，对您的用户和他们的首选项进行盘点。在一个位置(比如主页)和跟踪分析开始，看看它是否对你有效。
使用视差来处理内容和消息。这种新潮的技术应该可以增强设计和互动之间的乐趣。
----图文来自：design shack