HTML 背景滚动效果答案

【问题标题】：HTML Background Scrolling EffectHTML 背景滚动效果
【发布时间】：2013-09-05 19:42:57
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

您可能会发现视差滚动很有帮助。在 Google 中搜索它，您会找到有关该主题的各种教程。

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

【讨论】：

【解决方案2】：

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

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

根据您的需要，有一些流行的 Parallax 库：

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

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

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

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

如果您想了解更多信息，请查看此list of tutorials/libraries。

【讨论】：