更快的滾動事件？ - 滾動後背景「跳轉」

我有一個小問題。我想要做一些像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/ （向下滾動，直到您看到背景圖片）

來源

2011-10-09 ezakto

出現，使有問題的功能耐克的代碼可以在這裏找到：http://www.nikebetterworld.com/lib/js/com.nikebetterworld .js？0.1.0.0 –

問題是關於表演nce問題在我目前的企圖：/ – ezakto

關鍵是要使用固定的背景，如果你必須使它平滑。見http://jsfiddle.net/MZGHq/7/

參考文獻：

本頁面似乎有垂直視差效果如何工作的一個很好的解釋：http://www.webdesignshock.com/one-page-website/

也看看這一個（不使用固定的背景.. 。注意它的外觀有點神經質像你這樣）： http://www.franckmaurin.com/the-parallax-effects-with-jquery/

來源

2011-10-22 01:51:29 Muhd

謝謝老兄，這就是訣竅。 – ezakto

切換到position：fixed可防止瀏覽器在通過Javascript混淆標記之前重繪標籤，這就是爲什麼它可以防止跳動 - 但它引入了您需要處理的非平凡複雜問題。它的水平位置現在相對於視口而不是文檔或定位容器，所以水平滾動和瀏覽器寬度可能會帶來新問題。 –

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

我相信問題是0.5。當你計算新位置時，前一個位置和新位置之間的差異就足夠了，因爲它是一個可感知的轉變。

更改0.5這一點0.2或更低的最小化，但是視差效果不太明顯 - 這是不是你想要的。

我會嘗試不同的方法 - 偷看在GitHubs 404頁爲例： https://github.com/ddflsdigjh;ad

來源

2011-10-11 04:40:38 donohoe

使用「固定」的背景
的後臺位置的位移應該比滾動大得多（不是0.5而是0.01）似乎問題只發生在FF中。這是重新渲染頁面和JavaScript時最慢的瀏覽器。

來源

2011-10-12 09:52:04 holden321

更快的滾動事件？ - 滾動後背景「跳轉」

回答

相關問題