如何对页面的不同部分实现视差效果？答案

【问题标题】：How to implement parallax effect to different sections of a page?如何对页面的不同部分实现视差效果？
【发布时间】：2018-07-24 02:20:56
【问题描述】：

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

我创建了一个有点过于简单的例子来说明我想做的事情。我希望精灵（红色圆圈和绿色方块）以与实际背景不同的速率向上移动。但是，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) 部分吗？或者有没有办法限制对象可以移动的像素或百分比？

【问题讨论】：

是的，我已经看到用鼠标滚动时“断断续续”的移动，当然，这也取决于浏览器。 Opera 的滚动非常流畅，即使使用鼠标也是如此，这使得效果更加令人愉悦（但我尝试过的其他浏览器没有），所以感谢您的建议。我会调查的。该插件并没有完全按照我一开始的想法做，但我认为在我尝试使用它的上下文中它看起来仍然是一个非常好的效果。

【解决方案1】：

使用两个脚本可以非常容易地实现您想要完成的任务。

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

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

由于两个脚本都将事件侦听器用于垂直/滚动活动，因此它们将协同工作以创建适当的动画，每个脚本都处理它的特定任务。

仅此一项就可以提供更好的灵活性，因为您有两个不同的 API 用于非常特定的功能。

这是最近的SITE，展示了最新的插件，可帮助您开始寻找合适的滚动和视差脚本。

【讨论】：

【解决方案2】：

看来jquery parallax相关的答案已经很多了。

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

不规则的背景不会被子元素的动画影响。

看这里的侧边栏，似乎有很多关于视差 jquery 的答案，尽管其中一些似乎是基于 nikebetterworld 示例，这不是我认为您正在寻找的。p>

【讨论】：

是的，大多数似乎与我的目标无关。 Nikebetterworld 似乎是许多关于此事的问题的催化剂。感谢 jsfiddle 的小例子。我将不得不在午休时间对此进行测试，因为这是我的小项目 :)