HTML背景滚动效果

Question

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

我试着翻阅他们的消息来源，找出他们是如何做到的，但没有任何运气。我看到他们在一个homeImages变量中加载了背景图像，但从未在脚本中找到它。这是完全可以用CSS完成的事情吗？有我可以搜索的这个效果的名字吗？

Answer 1

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

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

Answer 2

他们所使用的效果叫做视差。

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

根据您的需要，有几个流行的视差库：

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

视差-JS --这个库也是依赖于jQuery的，但是它的特性可能更小一些，实现起来也更容易一些。

亚视差也是由jQuery驱动的，类似于视差JS，但提供了一些调整效果的选项。

超级涡旋Orama也是一个jQuery插件(感觉到主题了吗？)这个滚动效果库是专门针对动画的，并提供了很酷的选项，记住这一点。

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