今天碰巧看到一个电子商务网站,Harrods.com。我认为他们使用的滚动效果(非移动网站)非常酷。内容和背景似乎以不同的速度滚动。当您滚动时,导航选择器也会移动到相应的类别下。
我试图通过他们的来源弄清楚他们是如何做到的,但没有任何运气。我看到他们在homeImages
变量中加载了背景图像,但从未发现它在脚本中使用过。这是完全可以用 CSS 完成的吗?我可以搜索此效果的名称吗?
今天碰巧看到一个电子商务网站,Harrods.com。我认为他们使用的滚动效果(非移动网站)非常酷。内容和背景似乎以不同的速度滚动。当您滚动时,导航选择器也会移动到相应的类别下。
我试图通过他们的来源弄清楚他们是如何做到的,但没有任何运气。我看到他们在homeImages
变量中加载了背景图像,但从未发现它在脚本中使用过。这是完全可以用 CSS 完成的吗?我可以搜索此效果的名称吗?
您可能会发现视差滚动很有帮助。在 Google 中搜索它,您会找到有关该主题的各种教程。
@RobertHarvey 提供的有用链接http://prinzhorn.github.io/skrollr/
他们使用的效果称为视差。
这是一个 JS 驱动的特殊效果,让您可以将滚动率附加到页面上的各个元素。
根据您的需要,有一些流行的 Parallax 库:
Stellar.js这个库是基于 jQuery 的,它支持水平和垂直滚动。它还具有对 iOS 移动设备的实验性支持。
Parallax-JS这个库也依赖于 jQuery,但它的功能可能更小一些,并且更容易实现。
jparallax也是 jQuery 驱动的,类似于 Parallax-JS,但提供了更多用于调整效果的选项。
Super Scroll Orama也是一个 jQuery 插件(感觉主题了吗?)这个滚动效果库专门针对动画,并提供了很酷的选项。
如果您想了解更多信息,请查看此教程/库列表。