Desplazamiento Vertical Parallax

Question

Estoy trabajando en una paralaje vertical simplificada (similar a http://nikebetterworld.com).

Tengo un quick demo working - el código funciona técnicamente, pero me da un efecto nervioso en el repintado después de cada desplazamiento - parece que el javascript está pasando tarde. ¿Alguna idea de por qué? No puedo ver nada en el guión que realmente se destaque.

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

Parece que las imágenes están siendo trasladados en dos ocasiones - por primera vez por el desplazamiento del navegador, y luego por su scroll() controlador. De ahí la inestabilidad.

podría obtener un efecto más limpio mediante el uso de position:fixed o background-attachment:fixed para las imágenes - de esta manera no se ven afectados por el desplazamiento del navegador, pero será movido por el manejador scroll(). Ya no tendrás un efecto peleando con el otro. Deberá modificar su controlador scroll() según corresponda.

Answer 2

Debe verificar si su llamada de retorno por desplazamiento se está llamando con demasiada frecuencia. Si este es el caso, se puede tratar de usar setInterval para limitar el número de 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