Question

我正试图在Scrollorama的帮助下创建视差滚动网站但我想使用非典型的动画。此动画应从上到下，然后停在页面中间并返回（从中间到顶部）。 Scrollorama的作者说，这种类型的动画不支持scrolllorama，也不支持他的新插件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代替top可以将相同的概念应用于水平滚动height）

Answer 2

这甚至不像RustyTheBoyRobot那样优雅，但你可以通过将元素包装在另一个透明的容器元素中来实现。然后，您可以将容器设置为动画，并将原始元素设置为动画。

示例：

//animate in
scrollorama.animate('#elementToAnimateContainer',{
   delay: 0,
   duration: 100,
   property:'left',
   start:-3000,
   end: 0,
   pin: true
});

//animate out
scrollorama.animate('#elementToAnimate',{
   delay: 500,
   duration: 100,
   property:'left',
   start:0,
   end: 3000,
   pin: true
});

唯一的问题是容器仍然在屏幕上，但如果设置为透明，则不会看到它。您以后可以随时$('#elementToAnimateContainer').remove()，或设置pointer-events:none;等。

正如我所说，它并不漂亮，但它会按你的要求行事。

视差滚动两个方向

2 个答案: