HTML 背景滚动效果

HTML Background Scrolling Effect

本文关键字：滚动背景 HTML 更新时间：2023-09-26

今天碰巧遇到了一个电子商务网站，Harrods.com。我认为他们使用的滚动效果（非移动网站）真的很酷。内容和背景似乎以不同的速率滚动。滚动时，导航选择器也会移动到相应的类别下。

我试图通过他们的消息来源来弄清楚他们是如何做到的，但没有任何运气。我看到他们在homeImages变量中加载了背景图像，但从未发现它在脚本中使用。这是纯粹用CSS可以完成的事情吗？我可以搜索此效果的名称吗？

您可能会

发现视差滚动很有帮助。在谷歌中搜索它，你会发现关于这个主题的各种教程。

@RobertHarvey http://prinzhorn.github.io/skrollr/提供的有用链接

他们使用的效果称为视差。

这是一个JS驱动的特殊效果，可让您将滚动速率附加到页面上的各个元素。

根据您的

需要，有一些流行的视差库：

Stellar.js这个库是基于jQuery的，它支持水平和垂直滚动。它还具有对iOS移动设备的实验性支持。

视差-JS 这个库也是依赖于jQuery的，但它的功能可能更简洁一些，并且更容易实现。

jparallax 也是 jQuery 驱动的，类似于 Parallax-JS，但提供了更多用于调整效果的选项。

Super Scroll Orama 也是一个jQuery插件（感应到主题了吗？）这个滚动效果库专门针对动画，并考虑到这一点提供了很酷的选项。

如果您想了解更多信息，请查看此教程/库列表。