Question

我希望在网站上实现视差效果。我想知道是否可以在页面的不同部分实现这种滚动效果而不会相互影响。

我创建了一个我想要做的简单示例。我希望精灵（红色圆圈和绿色方块）以与实际背景不同的速度向上移动。然而，a）和b）中的例子在不同的DIV中，并且它们具有不规则的边界，这些边界位于同一容器内的另一个div中。像这样：

<div id="section-1">
<div id="1-top"></div>
<div id="1-content"></div>
<div id="1-bottom"></div>
</div>

有没有办法将精灵向上移动通过div和边框，但不能在主背景上看到（在这种情况下为蓝色）。

b）部分中的方块是否会向上移动到a）部分，或者是否有办法限制对象可以移动多少像素或百分点？

Example

Answer 1

似乎有很多与jquery视差相关的答案。

视差的技巧是它越往后，移动更短的距离需要相同的时间。虽然我没有任何具体的等式来设置它们，但可以通过一些工作来完成。

不规则的背景不会被子元素的动画所困扰。

看看这里的侧边栏，似乎有很多关于视差jquery的答案，虽然其中一些似乎是基于nikebetterworld的例子，这不是我认为你正在寻找的。

Answer 2

使用两个脚本可以实现您想要实现的目标。

除了使用 jQuery视差脚本之外，您还应该使用 jQuery滚动脚本来处理红色圆圈和绿色方块要求。

有很多演示要检查，并且选择正确的滚动脚本应该在视差脚本之前，因为这些对象包含在div中，然后视差会随着背景一起移动。

由于两个脚本都将使用事件监听器进行垂直/滚动活动，因此它们将协调工作以创建正确的动画，每个脚本都处理它的特定任务。

只有这样才能提供更好的灵活性，因为您可以使用两个不同的API 来实现非常具体的功能。

这是最近的SITE，显示了开始寻找正确的滚动和视差脚本的最新插件。