更快的滾動事件？ - 滾動后背景“跳躍”

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/