滾動垂直視差

我正在研究簡化的垂直視差（類似於http://nikebetterworld.com）。滾動垂直視差

我有一個quick demo working - 代碼在技術上可行，但每次滾動後我都會對重繪產生焦慮效果 - 這看起來像是JavaScript發生的很晚。任何想法爲什麼？我看不到真正脫穎而出的腳本中的任何內容。

var getYPosition = function() { 
    if (typeof(window.pageYOffset) == 'number') { 
    return window.pageYOffset; 
    } else { 
    return document.documentElement.scrollTop; 
    }  
}; 

$(document).ready(function(){ 
    var sections = $(".section"); 
    $(window).scroll(function() { 
    var x = getYPosition(), 
    y = Math.floor(x/1600), 
    z = $(sections[y]).offset(); 
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px"); 
    }); 
});

來源

2011-07-26 andrewheins

好主，這很煩人。我們能否讓這個時尚很快死亡？ –

我一邊喝醉，一邊看着那不是一個好主意。 – tster

它看起來就像圖像被移動兩次 - 第一次由瀏覽器滾動，然後由您scroll()處理程序。因此抖動。

對圖像使用position:fixed或background-attachment:fixed可以獲得更清晰的效果 - 這樣它們不受瀏覽器滾動的影響，但會被scroll()處理程序移動。你將不再有一個與另一個戰鬥的效果。您必須相應地修改您的scroll()處理程序。

來源

2011-07-26 04:18:35 brainjam

background-attachment：fixed;我甚至不知道財產存在。謝謝！ – andrewheins

您應該檢查您的滾動回調過於頻繁。如果是這樣的話，你可以嘗試使用setInterval的限制rerenderings數量：

http://ejohn.org/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"), 
    didScroll = false; 

$(window).scroll(function() { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     didScroll = false; 
     // Check your page position and then 
     // Load in more results 
    } 
}, 250); //in miliseconds

來源

2011-07-26 03:19:58 hugomg

不太需要這個問題，但一個很好的技術。謝謝。 – andrewheins

Undersocre.js，你應該考慮用於任何非平凡的JavaScript項目，有一個方法可以爲你調用'throttle'。 –

滾動垂直視差

回答

相關問題