Evento di scorrimento più veloce? - Sfondo "salta" dopo lo scorrimento

Question

Ho un piccolo problema. Sto provando a fare qualcosa come lo sfondo di parallasse di nikebetterworld.com. Nel mio primo tentativo, ho ottenuto qualcosa che funziona, ma può funzionare meglio. Quando si scorre, la posizione dello sfondo cambia. Il problema è che cambia dopo pochi millisecondi dopo lo scorrimento, quindi posso vedere come lo sfondo "salta" dopo lo scorrimento.

codice:

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

Qualche suggerimento? Grazie.

Modifica

Guardate questo esempio: http://jsfiddle.net/MZGHq/ (scorrere verso il basso fino a visualizzare l'immagine di sfondo)

Answer 1

La chiave è utilizzare uno sfondo fisso se è necessario averlo liscio. Vedere http://jsfiddle.net/MZGHq/7/

Riferimenti:

Questa pagina sembra avere una buona spiegazione di come funziona l'effetto di parallasse verticale: http://www.webdesignshock.com/one-page-website/

prendere anche uno sguardo a questo (che non usano sfondo fisso .. .NOTA come appare un po 'nervosi come la tua): http://www.franckmaurin.com/the-parallax-effects-with-jquery/

Answer 2

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

credo che il problema è la 0.5. Quando si calcola la nuova posizione, vi è una differenza sufficiente tra la posizione precedente e quella nuova in modo da renderlo percepibile.

Modifica 0,5 a 0,2 o inferiore minimizza questo un po ', ma l'effetto di parallasse è meno pronunciata - che non è quello che si desidera.

Vorrei provare un approccio diverso - dare uno sguardo a GitHubs pagina 404 come esempio: https://github.com/ddflsdigjh;ad

Answer 3

1. uso 'fisso' background
2. lo spostamento della posizione di fondo dovrebbe essere molto più grande di scorrimento (non 0,5 ma 0,01) sembrava che il problema si verificasse solo in FF. Questo è il browser più lento nelle pagine di rerendering e javascript.