10 个用于创建视差滚动效果的 CSS 和 JavaScript 片段

关于视差设计及其在网络上的工作方式存在很多混淆。 一般来说，视差设计使用运动来在页面上创建深度错觉。

这可能与随着用户滚动而移动的背景变化或半固定位置项目有关。 我们已经介绍了来自网站的许多示例，但没有详细介绍所涉及的技术。

对于这个集合，我选择了我最喜欢的 CSS 和 JavaScript 片段来创建视差布局。 所有示例都提供免费源代码，因此您可以使用代码片段，甚至在您自己的项目中使用它们。

1. CJ Gammon的大堕落

这个视差示例是我发现的最独特的界面之一。 它使用一个自定义脚本来创建一个瀑布精灵，它似乎在页面上无休止地流动。 它建立在通过 JavaScript 控制的画布元素上，因此它是一个非常技术性的设置。

在大多数情况下，这证明了现代 Web 开发中的可能性。 学习画布元素可以让您对设计有很大的控制权。

看看 CJ Gammon 笔下的大瀑布

2. Sebastian Schepis 的CSS 滚动视差

这是一个更实用的视差效果，具有固定的背景和较大的页面。 滚动时，每个页面部分都会显示在背景上方。 这会产生深度错觉，这是出色视差设计的关键要素之一。

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

请参阅 Sebastian Schepis 的 Pen CSS 滚动视差效果

3. Renan Breno 的简单图像标签视差

您经常会发现视差设计与大型全屏背景图像相结合。 这些在公司网站和初创公司中都很常见，它们通常以一定的视差“滚动速度”为背景。

这里的区别并不在于您向下滚动页面的速度或图像放置的大小。 相反，您会看到滚动时图像在页面背景中移动的速度。 这是一种微妙的视差效果，但这种布局是查看不同动画速度的绝佳模板。

查看 Renan Breno 的 Pen Simple Image Tag Parallax

4. 视差和固定图像背景

固定图像背景可以很好地分割页面并均匀划分内容部分。 当您滚动时，感觉各个页面部分高于背景图像。 这一切都是为了在滚动时为视差效果注入活力。

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

查看 chaobu 的 Pen #Maincode Hackdays

5. Paulo Cunha 的CSS Parallax

这个视差示例是视差效果如何工作的独特示例。 所有页面内容都位于一个大型英雄图像下方，该图像在滚动内容下方消失。 这也使用固定的图像位置使其看起来好像页面在图像上移动，而不是图像保持在原位。

您可以在长滚动布局中使用相同的效果，并且它具有相似的设计风格。 这对于带有大型特色图片的单个博客文章或使用大型英雄来吸引注意力的登陆页面最有效。

请参阅 Paulo Cunha 的 Pen CSS Parallax

6. Katie Rogers 的视差设计

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

这种效果之所以有效，是因为内容区域的背景上有大框阴影。 自然地，这通过为页面提供理论光源和层次结构来创造深度错觉——对于单页布局来说，这是一个非常好的想法。

查看 Katie Rogers 的 Pen Parallax Design

7. Rich Howell的滚动背景图像视差

早些时候，我提到了滚动速度如何根据背景位置的变化率而变化。 这个例子是一个完美的比较，看看它是如何工作的。

请注意，您需要使用滚动条来查看此示例的效果。 我尝试使用鼠标滚轮并没有看到任何差异，但是当您移动滚动条时，您会注意到列之间的速度变化。

这些速度都不是对视差设计的错误或不准确描述。 它们只是在页面上创建运动的不同方法，这个小示例是可视化许多选项的好方法。

参见 Rich Howell 的 Pen Scrolling Background-Image Paralax

8. Saransh Sinha 的星空视差背景

虽然这种效果与滚动无关，但它直接与视差设计有关。 它使用纯 CSS 在页面背景中创建视差星形动画。 您可以在页面上添加文本甚至内容区域，但星形乍一看会立即创建深度。

动画通过 CSS 运行，但此代码段使用 Sass 和 Compass，因此在进行编辑之前了解它会有所帮助。

请参阅 Saransh Sinha 的 CSS 中的 Pen Parallax Star 背景

9. Jack Rugile 的Canvas Parallax Skyline

有时，视差设计还针对鼠标移动以及滚动功能。 这种画布设计创造了一个无尽的天际线效果，对页面上的鼠标移动做出反应。 当您重新定位鼠标时，视角会发生变化。 但动画保持不变，您可以看到这个天际线以清晰的视觉层次移动。

当然，这确实需要 JavaScript 来制作动画，因为这是一个非常复杂的想法。 但这也不是您在许多网站上都能找到的东西，因此您也不会将其复制到您的网站上。 但作为一个视差概念，这个真的很有趣。

查看 Jack Rugile 的 Pen Canvas Parallax Skyline

10. Bajjy Xilo 的破碎玻璃过滤器

我以前在网站上看到过这种效果，创造了一个非常奇特的设计。 破碎的玻璃滤镜给人一种背景图像被分割成许多不同部分的错觉。 图像几乎看起来像是在一块玻璃上，它破碎了，使图像破裂并扭曲了图像。

您可以使用纯 CSS 复制这种效果，它是一种很酷的简洁效果，但除了花哨的设计之外可能没有任何实际的、真实的用途。 尽管如此，这仍然是滚动时视差深度和运动的一个令人印象深刻的例子。

请参阅 Bajjy Xilo 的 Pen BrokenGlass css 过滤器