2

我目前正在开发一个视差插件，以帮助创建垂直滚动站点之一，其中某些元素会产生视差效果。

大多数插件使用巨大的 DIV 标签并滚动背景。在我的例子中，这是行不通的，因为客户希望动画角色精灵和各种其他元素被视差 - 比如内容。因此，我需要移动元素本身，而不是移动背景。我还没有找到可以做到这一点的插件。

我的插件运行得非常好，但有一个例外。随着紧张或沉重的滚动，元素在页面上爬行 - 没有结束它们垂直开始的地方。这是一个例子（请原谅可怕的造型，这是一个粗略的模型）： http: //www.nebulus.org/parallax-test

哦，正在进行的插件在这里：http://www.nebulus.org/parallax-test/js/libs/jquery.scrollParallax.js

如果你快速向上/向下滚动，你会注意到页面顶部的精灵最终离它们开始的地方很远。有人对如何让他们表现得有想法吗？非常感谢您的帮助 - 我确实计划在完成后发布插件（轻推轻推，眨眼眨眼）。

4

1 回答 1

1

对于位置的微小变化 (containerScrollY1-containerScrollY2) = 1 或 -1，你有一个舍入问题

newY = myPosY + (containerScrollY1-containerScrollY2)*params.inertiaY;
$base.css('top',newY+'px');

如果inertia = 0.25并且您向下滚动一个像素， 如果您向上滚动一个像素，则到then new = old - 0.25哪个楼层， 那么对于单个像素的任何滚动（我记录了很多尝试您的代码），对象向上移动一个向下滚动，向上滚动时根本不动。old - 1new = old + 0.25old

对于位置的大变化（您谈到的快速滚动），问题源于仅在可见的情况下移动对象。如果去掉isVisible里面的条件handleScrolling，快速滚动问题就消失了（只要每个滚动都足够大，可以避免上面的舍入问题）。例如，100 像素的滚动导致屏幕外 20 像素的对象在未记录的跳跃中移动了 80 像素（即，它myPosY不同步了 80 像素）。

为了解决这两个问题，我会将对象的原始位置存储为参数，然后始终从该绝对位置计算其视差位置。比如newY = params.origY - $(params.container).scrollTop()*inertiaY 这对我有用。祝你好运！

此外， http: //johnpolacek.github.com/scrollorama/非常好，如果您没有尝试过它，它还有视差。不知道它是否适用于您的具体情况。

于 2012-07-05T09:15:28.783 回答