对于视差设计以及它在网络上的工作原理，有很多人感到困惑。一般来说，视差设计使用运动来在页面上创造深度的错觉。
这可能与背景变化或半固定位置的项目有关，这些项目与用户的滚动一起移动。我们已经介绍了许多网站的例子，但还没有详细介绍其中的技术。
在这个系列中，我挑选了我最喜欢的CSS和JavaScript片段来创建视差布局。所有的例子都提供免费的源代码，所以你可以玩玩这些片段，甚至在你自己的项目中使用它们。
1.CJ Gammon的"大瀑布"：
这个视差例子是我所发现的最独特的界面之一。它使用了一个自定义的脚本来创建一个瀑布精灵，似乎在页面上无休止地流动。它建立在通过JavaScript控制的画布元素上，所以它是一个相当技术性的设置。
在大多数情况下，这确实证明了现代网络开发的可能性。学习画布元素让你对设计有很大的控制力。
请看CJ Gammon的《笔大跌》。
2.CSS滚动视差作者：Sebastian Schepis
这是一个更实用的视差效果，有一个固定的背景，上面的页面更大。当你滚动时，每个页面部分都会出现在背景之上。这创造了深度的错觉，这也是一个伟大的视差设计的关键元素之一。
开发者Sebastian Schepis在这个页面上只使用了CSS，而且是一个相当简单的概念。我认为任何人都可以轻松地克隆这个，更不用说背景设计可以大大增强。
请看Sebastian Schepis的PenCSS Scrolling Parallax效果
3.简单的图像标签视差作者：Renan Breno
你经常会发现视差设计与大的全屏背景图片结合在一起。这在公司网站和初创企业中非常常见，它们通常以一定的视差 "滚动速度 "为背景。
这里的区别并不在于你在页面上滚动的速度有多快，或者图片的位置有多大。相反，你看到的是当你滚动时，图像在页面背景中移动的速度。这是一个微妙的视差效果，但这个布局是一个很好的模板，可以看到不同的动画速度在发挥作用。
请看Renan Breno的《笔简单图像标签视差》。
4.视差和固定图像背景
固定图像背景可以很好地分割页面，并将内容部分均匀地划分开来。当你滚动时，你会感觉到个别页面部分比背景图片高。这都是为了在滚动时给视差效果注入活力的设计。
我不会使用这种确切的布局，因为内容区域看起来有点薄。但是，如果你喜欢这种风格，我建议用与你的网站相关的不同图片来点缀每个页面部分。
参见Chaobu的Pen#Maincode Hackdays
5.CSS视差法作者：Paulo Cunha
这个视差例子是一个独特的视差效果的例子。所有的页面内容都在一个大的英雄图像下面，这个图像在滚动时消失在内容下面。这也使用了固定的图像位置，使页面看起来好像是在图像上移动，而不是图像固定在原地。
你可以在一个长滚动的布局中使用同样的效果，它的设计风格也很相似。我认为这种效果最适合于有大型特色图片的单篇博客文章，或者使用大型英雄人物来吸引注意力的登陆页面。
请看Paulo Cunha的PenCSS Parallax
6.凯蒂-罗杰斯的视差设计
这是一个有趣的婚礼页面样本的视差设计。 它有一个分页设计，图像通过视差固定滚动将许多不同的内容区域分开。所有的东西都在CSS上运行，这是一个很好的点子，所有的背景图片在向下移动页面时都保持固定。
这种效果之所以有效，是因为内容区的背景上有很大的盒状阴影。自然地，这通过给页面一个理论上的光源和层次创造了深度的幻觉。对于单页布局来说，这是一个非常好的想法。
参见凯蒂-罗杰斯的《笔式视差设计》。
7.滚动的背景-图像视差作者：Rich Howell
早些时候，我提到了滚动速度可以根据背景位置的变化率而变化。那么，这个例子是一个完美的比较，可以看到这个工作的实际情况。
请注意，你需要使用滚动条才能看到这个例子的效果。我试着用鼠标滚轮，看不出有什么不同，但是当你移动滚动条时，你会看到各列的速度变化。
这些速度都不是对视差设计的错误或不准确的描述。它们只是在页面上创造运动的不同方法，而这个小例子是可视化许多选项的一个好方法。
参见Rich Howell的《笔式滚动背景-图像视差》。
8.星空视差背景作者：Saransh Sinha
虽然这个效果与滚动无关，但它直接与视差设计有关。它使用纯CSS在页面的背景中创建一个视差星形动画。你可以在页面上方添加文本，甚至是内容区，但星星在第一眼就能创造出深度。
该动画通过CSS运行，但这个片段使用了Sass和Compass，所以在进行编辑前了解它们会很有帮助。
请看Saransh Sinha的CSS中的PenParallax Star背景
9.帆布视差天际线 作者：Jack Rugile
有时，视差设计也会针对鼠标移动以及滚动功能。这个画布设计创造了一个无尽的天际线效果，可以对页面上的鼠标移动做出反应。当你重新定位你的鼠标时，观察的角度就会改变。但动画保持不变，你可以看到这条天际线的移动，有一个清晰的视觉层次。
当然，这确实需要JavaScript来制作动画，因为这是一个相当复杂的想法。但这也不是你在许多网站上能找到的东西，所以你也不会把它复制到你的网站上。但作为一个视差概念，这个真的很有趣。
请看Jack Rugile的《钢笔画视差天际线》。
10.破碎的玻璃过滤器by Bajjy Xilo
我以前在网站上见过这种效果，它创造了一个非常奇特的设计。碎玻璃过滤器给人一种背景图片被分割成许多不同部分的错觉。它几乎看起来就像图像是在一块玻璃上，然后它破碎了，使图片断裂，并使图像倾斜。
你可以用纯CSS来复制这种效果，这是一种很酷的效果，但除了花哨的设计之外，可能没有任何实际的、现实世界的用途。不过，这仍然是一个令人印象深刻的视差深度和滚动时的运动的例子。
查看Bajjy Xilo的PenBrokenGlass css过滤器
