Scrolling Vertical Parallax

Question

Basitleştirilmiş dikey paralaks üzerinde çalışıyorum (http://nikebetterworld.com benzeri).

bende bir quick demo working - Kod teknik olarak çalışır, ancak ben her kaydırma sonra rötuş üzerinde gergin bir etkiye alıyorum - JavaScript geç oluyor gibi görünüyor. Bir fikrin neden? Senaryoda gerçekten göze çarpan hiçbir şey göremiyorum.

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"); 
    }); 
}); 

Answer 1

görüntüleri iki kez taşınıyor gibi görünüyor - İSS'niz tarafından daha sonra ilk tarayıcı kaydırma tarafından ve scroll() handler. Bu yüzden jitter.

Sen görüntüler için position:fixed veya background-attachment:fixed kullanarak açık bir etki alabilirsiniz - onlar tarayıcı kaydırma etkilenmeyen bu şekilde, ama scroll() işleyicisi tarafından taşınacaktır. Artık diğeriyle kavga eden bir efektin olmayacak. scroll() işleyicinizi buna göre değiştirmeniz gerekecektir.

Answer 2

Kaydırma geri çağrınızın çok sık çağrıldığını kontrol etmelisiniz. Bu durumda ise, rerenderings sayısını sınırlamak için setInterval kullanarak deneyebilirsiniz:

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