3

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

4

2 回答 2

6

我以前从未见过 Scrollorama，它让我很感兴趣，所以我做了一些东西来做你所要求的。它不是插件；我希望滚动代码简单，而不是与插件类型的代码杂乱无章。我认为把它变成一个插件会很简单，所以我会把它留给你（除非你需要一些帮助）。

代码说明

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

scrollAmount / (totalSize - visibleSize)

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

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

（我所有的代码都假设您正在处理垂直滚动。相同的概念可以通过使用leftandwidth而不是topand应用于水平滚动height）

于 2012-06-25T23:23:13.713 回答
1

这甚至不如 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;等。

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

于 2012-08-17T20:53:41.277 回答