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

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

Answer 4

背景位置的位移应大于滚动。可以在这里找到另一种方法：https://slidebazaar.com/categories/free-powerpoint-templates/

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

4 个答案: