Come risolvere lo sfarfallio dell'elemento mentre si scorre con l'effetto di parallasse in JavaScript?

Question

Sto cercando di ricreare il sito Web con effetto di parallasse utilizzando JavaScript. Ciò significa che ho due o più livelli, che si muovono a velocità diverse durante lo scorrimento.

Nel mio caso mi sto muovendo un solo strato, l'altro rimane statico: strato 1 = sito di testo; livello 2 = sfondo elemento;

per questo sto utilizzando semplice codice sorgente (con jQuery 1.6.4):

var docwindow = $(window); 

function newpos(pos, adjust, ratio){ 
    return ((pos - adjust) * ratio) + "px"; 
} 

function move(){ 
    var pos = docwindow.scrollTop(); 
    element.css({'top' : newpos(pos, 0, 0.5)}); 
} 

$(window).scroll(function(){ 
    move(); 
}); 

Il problema: - Tutti i calcoli sono fatti a destra e l'effetto "funziona" come previsto. Ma c'è qualche problema di prestazioni sotto alcuni browser (Chrome MAC/Windows, Opera MAC, IE, paradossalmente non Safari).

Cosa vedo durante lo scorrimento? - Mentre si scorre lo sfondo si muove in una direzione insieme allo scroll, ma sembra saltar fuori saltuariamente alcuni pixel indietro e poi avanti, il che crea un effetto molto disturbante (non fluido).

soluzioni che ho provato: - l'aggiunta di un timer per limitare gli eventi di scorrimento - utilizzando il metodo .animate() con breve durata anziché il metodo css().

Ho anche osservato che l'animazione è fluida quando si utilizza il metodo .scrollTo (scrollTo plugin jQuery). Quindi sospetto che ci sia qualcosa di sbagliato nell'attivare gli eventi di scorrimento (troppo veloce).

Avete osservato lo stesso comportamento? Sai, come risolverlo? Puoi pubblicare una soluzione migliore?

Grazie per tutte le risposte

EDIT # 1: Qui puoi trovare gli dimostrazione jsfiddle (con timer): http://jsfiddle.net/4h9Ye/1/

Answer 1

Credo che si dovrebbe usare scrollTop() al posto e cambiare la posizione di fondo per riparato. Il problema è che impostandolo su assoluto lo muovere di default quando scorri verso l'alto o verso il basso.

Lo sfarfallio si verifica perché la posizione viene aggiornata come parte del browser predefinito e viene nuovamente aggiornata come parte dello script. Questo renderà entrambe le posizioni anziché solo quella che vuoi. Con fisso, lo sfondo non si muoverà mai a meno che tu non lo dica.

Ho creato una demo per voi a http://jsfiddle.net/4h9Ye/2/.