更快的滚动事件？ - 滚动后背景“跳跃”

Question

我有一个小问题。 我正在尝试做像nikebetterworld.com这样的视差背景。 在我的第一次尝试中，我得到了一些有效的东西，但它可以更好地工作。 滚动时，背景位置会发生变化。 问题是它在滚动后几毫秒改变，所以我可以看到滚动后背景如何“跳跃”。

码：

var $w = $(window);
function move($c) {
    var scroll = $w.scrollTop();
    var diff = $c.offset().top - scroll;
    var pos = '50% ' + (-diff)*0.5 + 'px';
    $c.css({'backgroundPosition':pos});
}
$w.bind('scroll', function(e){
    move(some_container);
});

有什么建议？ 谢谢。

编辑

看看这个例子： http ： //jsfiddle.net/MZGHq/ （向下滚动，直到看到背景图片）

Answer 1

关键是要使用固定的背景，如果你必须使它平滑。 见http://jsfiddle.net/MZGHq/7/

参考文献：

这个页面似乎很好地解释了垂直视差效果的工作原理： http ： //www.webdesignshock.com/one-page-website/

另外看看这个（他们不使用固定的背景......注意它看起来像你的一样有点跳跃）： http ： //www.franckmaurin.com/the-parallax-effects-with-jquery/

Answer 2

var pos = '50% ' + (-diff)*0.5 + 'px';

我相信问题是0.5。 当您计算新位置时，前一位置和新位置之间存在足够的差异，以使其成为可感知的位移。

将0.5改为0.2或更低会使这一点最小化，但视差效果不太明显 - 这不是你想要的。

我会尝试不同的方法 - 以GitHubs 404页面为例： https ： //github.com/ddflsdigjh ;ad

Answer 3

1. 使用'固定'背景
2. 背景位置的位移应该远大于滚动（不是0.5但是0.01），似乎问题只发生在FF中。 这是重新渲染页面和javascript中最慢的浏览器。

Answer 4

背景位置的位移应该比滚动大得多。 可以在此处找到不同的方法： https ： //slidebazaar.com/categories/free-powerpoint-templates/