jquery - 双向视差滚动

Question

我正在尝试在 Scrollorama 的帮助下创建视差滚动网站但我想使用非典型动画。该动画应该从上到下，然后在页面中间停止并返回(从中间到顶部)。Scrollorama作者表示scrollorama不支持这种类型的动画，他的新插件SuperScrollorama也不支持。也许有人可以向我推荐另一个具有此功能的插件。

Answer 1

我以前从未见过 Scrollorama，它引起了我的兴趣，所以 I built something to do what you're asking 。它不是一个插件；而是一个插件。我希望滚动代码简单，并且不与插件类型代码混淆。我认为将它变成一个插件会非常简单，所以我将把它留给你(除非你需要一些帮助)。

代码说明

jQuery 有一个 scrollTop()函数来确定容器从顶部滚动多远。使用滚动区域内元素的高度及其容器的高度，我们可以确定容器已滚动的百分比:

scrollAmount / (totalSize - visibleSize) 

(我们必须减去容器的高度 visibleSize 才能得到正确的结果。由于 scrollTop() 返回距离容器顶部的像素数隐藏的元素，一直滚动到底部将为我们提供 totalSize -visibleSize，而不仅仅是 totalSize)

我们可以使用该百分比来确定何时向上、向下或保持在同一位置。 repositionBanner() 函数获取滚动百分比并决定如何处理动画元素。在我的代码中，我选择让元素从 0-30% 移动到位置，从 30-70% 保持其位置，然后从 70-100% 飞回其原始位置。

(我的所有代码都假设您正在处理垂直滚动。通过使用 left 和 width 而不是，可以将相同的概念应用于水平滚动顶部和高度)