网站制作常用的10个用于创建视差滚动的CSS和JavaScript代码片段

关于视差设计以及它如何在网络上工作有很多困惑。一般来说，视差设计是利用运动来创建页面深度的幻觉。

这可能与背景更改或与用户滚动一起移动的半固定位置项目有关。网站制作已经介绍了很多来自网站的例子，但没有详细介绍所涉及的技术。

对于这个系列，我选择了我最喜欢的视差设计，它提供了免费的源代码，你可以玩，甚至可以带入你自己的项目。

1. The Great Fall

由CJ Gammon设计的Great Fall是我所见过的最独特的界面之一。

它使用一个自定义脚本来创建一个似乎无穷无尽地流向页面的瀑布精灵。它建立在通过JavaScript控制的画布元素上，因此它具有相当的技术设置。

更不用说这个页面还有小小的工具提示窗口，其中包含相关信息的内容框。这种效果非常酷，这是你可以通过体面的JavaScript知识复制的东西。

但大多数情况下，这实际上证明了现代Web开发中可能存在的一些问题。学习画布元素可以让您对设计有很多控制权。

2. CSS Scrolling Parallax

这里有一个更实用的视差效果，固定的背景和更大的页面。

滚动时，每个页面部分都显示在背景的“上方”。这产生了深度的幻觉，并且它是伟大的视差设计的关键元素之一。

开发人员Sebastian Schepis在此页面中使用纯CSS，这是一个非常简单的概念。我认为任何人都可以轻松克隆，更不用说背景设计可以大大增强。

3. Simple Image Tag Parallax

你会经常发现视差设计与大型全屏幕背景图像。这些在公司网站和初创公司都很常见，通常在背景中具有一定的视差“滚动速度”。

在这个片段开发人员Renan Breno花了一些时间搞乱了滚动速度，以显示它如何变化很大。

这里的区别并不在于你向下滚动页面的速度有多快，或者图像位置有多大。相反，您会看到滚动时图像在页面背景中的移动速度。这是一个非常微妙的视差效果，但这种布局是一个很好的模板，可以看到不同的动画速度。

4.＃主码Hackdays

固定图像背景可以很好地分割页面并均匀分割内容部分。您可以在为Hackdays事件创建的笔中看到一个很好的例子。

当你滚动它可以感觉像个别页面部分比背景图像“更高”。这一切都是为了在滚动时吸入视差效果而设计的。

我不会使用这个确切的布局，因为内容区域看起来很薄。但是，如果你喜欢这种风格，我建议用与你的网站相关的不同图像来标记每个网页部分。

5. CSS视差

Paulo Cunha创建的这个视差笔是视差效果如何工作的独特示例。

所有的页面内容都停留在一个大的英雄图像下面，该图像在滚动内容下消失。这也用来使它看起来好像页面移动的固定图像位置上的图像，而不是像住固定在适当位置。

你可以用长滚动布局使用同样的效果，它会有类似的设计风格。

我认为这对于具有大型精选图片的单篇博客文章或者使用大型英雄的着陆页吸引注意力效果最佳。

6.视差设计

这是Katie Rogers创建的示例婚礼页面的有趣视差设计。

它具有分割页面设计，图像通过视差固定滚动将许多不同的内容区域分开。一切都运行在CSS上，这是一个很好的触摸，并且所有背景图像在向下移动页面时保持固定。

这种效果是有效的，因为内容区域具有较大的背景阴影。自然，这给页面提供了一个理论光源和层次结构，从而产生了深度幻觉。单页布局非常好的主意。

7.滚动背景图像视差

之前我提到了如何根据背景位置变化率来改变滚动速度。

那么，这个由Rich Howell设计的例子就是一个完美的比较，看看它是如何运作的。

注意这支笔你需要使用滚动条来查看效果。我用鼠标滚轮试过，看不出有什么区别，但是当你移动滚动条时，你会看到整个列的速度变化。

这些速度都不是错误或不准确的视差设计描述。他们只是在页面上创建移动的不同方法，而这个小笔是一种很好的方式来可视化许多选项。

8.星空背景

虽然这种效果与滚动无关，但直接与视差设计有关。它使用纯CSS 在页面的背景中创建视差星形动画。您可以在页面上添加文字甚至是内容区域，但星星一眼就能立刻创造出深度。

所有的动画都是通过CSS运行的，但是这支笔使用了Sass和Compass，因此在编辑之前理解它们会很有用。

但是，您可以将其复制/粘贴到布局中，而无需进行太多编辑。CodePen允许您通过点击按钮将Sass编译为CSS，因此获取原始代码也不会有问题。

9.帆布视差天际线

有时，视差设计也将鼠标移动与滚动功能一起定位。这种画布设计创造了无尽的天际线效果，对网页上的鼠标移动起反应。

在重新定位鼠标时，视角会改变。但动画保持不变，您可以看到这个天际线以清晰的视觉层次移动。

当然，这对于动画来说确实需要JavaScript，因为这是一个非常复杂的想法。但这也不是你在许多网站上找到的东西，所以也不是你要复制到你网站的东西。但作为视差概念，这真的很有趣。

10.悬停视差

另一个鼠标目标视差效果是由Thulio Philipe创建的这种设计。它不会超过整个页面，因此它具有非常不同的视差概念。

不是用内容创建深度，而是使用针对鼠标的运动来创建图像内的深度。

容器内的每个项目在HTML中都有自己的“图层”。当你通过这个容器移动你的鼠标时，它看起来像是一些图像出现在其他图像上。

它全部通过JavaScript运行，对网络来说这是一个非常酷的效果。您可以尝试在横幅设计或自定义页眉中使用此功能。

11.碎玻璃过滤器

我之前在网站上看到过这种效果，它创造出一种非常独特的设计。的碎玻璃过滤器给出被分成许多不同的部分的背景图像的错觉。它几乎看起来像是在一个玻璃窗格上，它破碎了，破坏了图像并使图像倾斜。

您可以使用纯CSS来复制这种效果，这是一种很酷的做法，但可能没有任何超出花哨设计的实际用途。

不过，这是滚动时视差深度和运动的一个令人印象深刻的例子。