Jquery 视差在两个方向上滚动

我试图创建视差滚动网站的帮助下，但我想使用非典型的动画。这个动画应该从上到下，然后在页面中间停止，然后返回（从中间到顶部）。 Scrollorama的作者说这种类型的动画不支持Scrollorama，他的新插件也不支持Scrollorama。

---

也许有人可以给我推荐另一个具有此功能的插件。

我以前从未见过Scrollorama，它吸引了我，所以。它不是一个插件；我希望滚动代码是简单的，而不是与插件类型的代码混乱。我认为把它变成一个插件是非常简单的，所以我将把它留给你（除非你需要一些帮助）

代码说明

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

scrollAmount / (totalSize - visibleSize) 

（我们必须减去容器的高度

visibleSize

，以获得正确的结果。由于

scrollTop（）

返回元素顶部隐藏的像素数，因此一直滚动到底部将得到

totalSize-visibleSize

，而不仅仅是

totalSize

）

我们可以用这个百分比来决定何时上移、下移或保持在同一位置。

respositionbanner（）

函数获取滚动百分比并决定如何处理动画元素。在我的代码中，我选择让元素从0-30%移动到位，从30-70%保持其位置，从70-100%飞回其原始位置

---

（我的所有代码都假设您处理的是垂直滚动。同样的概念也可以应用于水平滚动，方法是使用

左

和

宽度

，而不是

顶部

和

高度

）

这甚至不如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
});

唯一的问题是容器仍然会出现在屏幕上，但是如果设置为透明，您将看不到它。您可以始终

$（'#element to animateContainer'）。稍后删除（）

它，或设置

指针事件：无等

正如我所说，它并不漂亮，但它会满足您的要求。
您是否尝试在常规jQuery中实现它？jQuery的动画功能非常简单。您正在尝试制作自定义动画；如果代码相对简单（乍一看，你的动画听起来很简单），为什么要尝试将你的需求压缩到第三方插件中？@RustyTheBoyRobot我需要这个插件的一些其他功能（如增长、缩放和飞行）。我有大约8个不同动画的部分。因此，当你向下滚动页面时，你希望一个对象从顶部飞入，停留在页面的中间，然后随着用户继续滚动，开始返回到它来自的位置。这是正确的吗？考虑哪种不同的视差jQuery插件支持反向动画。也许您可以使用事件侦听器来设置滚动位置，然后在到达网页中心时更改动画方向。这就是说，一旦你向上滚动事件监听器就会被忽略。因此，没有视差插件会这样做，因为您的问题是浏览器滚动，而不是视差滚动。解决方法是使用中心元素下方的克隆元素，并反向设置这些元素的动画。@arttronics-我不明白你的意思：“没有视差插件可以做到这一点，因为你的问题是浏览器滚动”。我可以将回调连接到滚动事件中，向上或向下；首先让子对象移出父对象，然后让父对象移出动画的第二部分。这将使未使用的容器远离屏幕。