视差设计的思想只是一种运动意识。更具体地说，“视差”一词是用来描述物体沿视线移动时对物体之间距离的感知。例如，在空间中离你最近的物体似乎比“背景”物体移动得更快、更动态。所以视差只是从观众的角度来衡量两点之间位置的差异。因为物体不是真的移动，这只是一种幻觉，像2D动画。

在这个概念的基础上，我们现在有了各种各样的设计趋势，目的是在网络上复制视差运动。在本指南中，我将介绍你可能需要知道的所有事情。视差滚动和视差设计技术。除了活生生的例子之外，我还提供了一些免费插件和代码片段，以帮助开发人员创建自己的插件视差效应为他们自己的项目。如果你进入本文的末尾，你也会发现一些最好的链接。视差滚动教程到目前为止已有的例子。

理解设计最简单的方法之一就是通过实例。让我们来看看网站布局中用于创建视差设计功能的特定趋势。

视差滚动最佳实践

阳江建网站关于视差设计的对话从动态效果开始。不幸的是你只是不能让动画在旧的浏览器中工作不支持更新的技术。当然，有一些视差滚动效果是容易支持的，但它们仍然需要大量的代码。在讨论最佳实践时，回退方法是非常重要的。

当涉及到建立一个视差网站时，我建议从最初的概念出发。认识到你想要完成的事情，以及你如何去做。有什么特别的理由页面应该是动画吗？任何图形或排版也应该是动画吗？视差功能与总体主题最协调。

有关：43辉煌免费jQuery图片库/滑块插件

有时你只是想动画滚动效果，因为他们看起来很好，这是完全可以接受的。根据视差动画的类型，您可能有移动的背景或跨越整个页面的图形。我建议开发一种备用方法，它可以在所有浏览器中工作，即使没有动画效果。至少要确保访问者仍然可以浏览静态网站。

使用一个可关联的单词来包含所有这些：简化。视差滚动可以从可爱和有趣到过于复杂，只需一些补充。如果内容仍然可以被消化，那么复杂就可以工作了。但过于复杂是不好的-这有点像阅读联邦条例的法典，以找到一个具体的条款写成法律。通过设计效果使内容和导航保持一致。.

视差滚动的很好例子

让我们首先介绍一些好的和坏的例子，然后深入研究更具体的视差设计技术。一般来说，一个伟大的视差布局应该讲述一个故事。这不需要在“很久以前”格式，但它应该清楚地说明你想要阐明的观点。

我真的很喜欢数据运动的例子，它的表现就像一个视差信息图。当您滚动内容时，该站点会上下和左/右动画。所有的信息都非常丰富，图形有助于讲述故事，而不是分散注意力。虽然效果并不特别，但它们确实提供了一种有效的讲故事方法。

另一个伟大的视差设计可以在烘焙机构找到。主页以循环的方式动画，通过不同的部分内容旋转。这并不是精确的视差效应，但它确实包含了用户在视线中移动时的深度错觉。我之所以将此标记为一个很好的例子，是因为它是可用的，但仍然具有创造性，而且具有时尚的实现。

视差网站设计的目标是给访问者留下深刻的印象，同时保持所有非官方的ux设计法的传统雕像。。伟大的视差网站在为数字艺术形式做出贡献的同时，以一种容易使用的格式传达他们的信息。运动是设计过程中的一个重要部分，所以考虑页面应该如何动画是很重要的，如果可能的话，也有一个选择的理由。

最伟大的视差网站让我觉得我在与专业设计师的作品互动。看看我在本指南中提供的许多例子，找出那些让你感到舒服的网站。这些网站可以提供最好的原型解决方案，无论你想要创造的视差效果。

坏例子

为了扩大您对伟大设计的理解，研究不友好或阻碍功能的低质量界面会有所帮助。下面的例子可能不是完全不能接受的，但是每个视差效应的一些方面让我作为一个用户感到沮丧。和让用户感到沮丧是一大罪过，应处以2周强制使用过时版本的InternetExplorer浏览Internet的惩罚-让惩罚与犯罪相适应，对吗？

我的第一个令人沮丧的例子是“赚钱”，这是一个关于信用社的信息页面。让我声明，我喜欢他们的信息和图形设计。页面本身实际上是非常精巧的。然而，在用户体验方面，页面是相当有限和不舒服的。您只能使用鼠标滚轮滚动，或者单击并拖动浏览器的滚动条。

这意味着箭头键不工作，页面上/下键也不工作。让事情变得更加混乱的是，没有任何可点击的链接可以在不同的页面上滑动。唯一的导航方法是用滚动条缓慢地滚动，并有害地喂养关节炎。整个体验感觉被监禁，虽然设计是美妙的，但它根本无法克服这样一个恼人的UX问题。

波兰儿童网络网站侧滚动视差设计有一个突出的问题：整个页面都是由图像组成的。很自然，你会问“甚至是短信？”是的，文本本身，可以很容易地输入到HTML中，而是用图像创建的。那天晚上，当我意识到这一点时，我吓坏了，不得不用夜光睡觉。

该网站的动画实际上是相当不错的，即使我不能阅读任何东西，因为谷歌不能翻译图片，我有一个感觉，这个网站将在我的伟大的例子列表，如果它不是这样的文字受损。创建视差设计时远离Flash动画并确保只对图像使用图像。实际上，这一建议贯穿于所有类型的网站，视差或非视差。你会让你的访客有好几个不眠之夜，质疑他们自己的设计、道德和理智。

为了完成本节，让我们再看一遍困难的UX设计示例。该网站的南澳大利亚公路旅行有一个奇特的视差滑块与几个不同的内容。虽然文本不是使用图像创建的，但是您仍然很难选择文本或与文本交互，因为它显示为幻灯片的一部分。这意味着您无法轻松地复制/粘贴位置，以便在Google中搜索它们。

但实际上我对这个布局的问题是它太混乱了。有一个顶部导航与一些按钮，动画之间的幻灯片，但他们觉得不顺利。动画是缓慢的，似乎内容会更好地呈现没有动画效果。我相信不是每个人都会同意我的观点，但它让我们回到了简单的概念。让视差动画为你的内容工作，而不是反过来。

有了所有这些抱怨，让我们转到一些具体视差效应的精彩例子。

不错的单页视差设计

许多不同风格的视差设计倾向于在单页布局上很好地工作。一个使用视差滚动的网站可以有多个页面，但是如果所有的内容都可以显示在一个页面上，那么浏览体验就会变得更加流畅。在一个页面上动画允许图形改变，背景移动，内容更加灵活。最大的问题通常是谷歌搜索排名，但取决于网站，这甚至可能不是一个问题。

一个这样的例子是Intacto的十周年纪念页面。它使用引导火箭飞船的图形与观众一起移动。当背景元素沿着距离滚动时，这就产生了运动的错觉。您还会注意到页面左侧的一些选项卡，这些选项卡允许快速导航。

我特别喜欢对导航过程有一定的控制，因为这意味着我可以跳过不同的部分而不需要滚动。它还提示页面内容的类型，如Intacto，显示它们的操作年数。图形是绝对一流的，我真的欣赏他们的设计意识。这无疑是我见过的最好的单页视差设计之一。.

背景视差滑动

当用户在不同的页面内容区域之间滚动时，会创建视差背景效果。有时这些会包括动画，但是通常，这只是一系列固定的背景，当你滚动通过它们时，它们就会移动。。这也可以被描述为位移每幅背景图像。