2

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

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

例子

4

2 回答 2

2

使用两个脚本可以实现您想要完成的任务。

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

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

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

仅此一项就可以提供更好的灵活性,因为您可以使用两个不同的 API 来实现非常特定的功能。

这是一个最近的站点,显示了开始寻找正确的滚动和视差脚本的最新插件。

于 2012-05-17T13:15:07.697 回答
2

好像已经有很多jquery parallax相关的答案了。

我在 jsfiddle 上玩过它:http: //jsfiddle.net/thinkingsites/88sqh/2/

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

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

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

于 2012-05-17T12:41:24.560 回答