视差双向滚动

Posted 2023-05-08

【中文标题】视差双向滚动

【英文标题】：Parallax Scrolling in both directions

【发布时间】：2012-06-24 19:51:14

【问题描述】：

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

【问题讨论】：

你试过用普通的jQuery实现吗？ jQuery 的动画功能非常简单。您正在尝试制作自定义动画；如果代码相对简单（乍一看您的动画听起来很简单），为什么还要尝试将您的需求压缩到 3rd 方插件中？

@RustyTheBoyRobot 我需要这个插件的一些其他功能（比如增长、缩放和飞行）。我有大约 8 个不同动画的部分。

因此，当您向下滚动页面时，您希望一个对象从顶部飞入，停留在页面中间，然后在用户继续时开始返回到它来自的位置滚动。对吗？

考虑Scrolling Parallax，这是一个支持反向动画的不同视差jQuery插件。也许您可以使用事件侦听器来获取滚动位置，然后在到达网页中心时更改动画方向。也就是说，一旦您向上滚动，事件侦听器就会被忽略。因此，没有视差插件会这样做，因为您的问题是浏览器滚动，而不是视差滚动。解决方法是在中心元素下方使用克隆元素并反向设置动画。

@arttronics - 我不明白你的意思：“没有视差插件会这样做，因为你的问题是浏览器滚动”。将回调挂钩到滚动事件（向上或向下）没有问题。

【参考方案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 应用于水平滚动） em>

【参考方案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;等。

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

【讨论】：

也许你可以把它倒过来；让孩子首先离开父母，然后让父母在动画的第二部分离开。这将使未使用的容器远离屏幕。