Evento de desplazamiento más rápido? - Fondo "salta" después de desplazarse

Tengo un pequeño problema. Estoy intentando hacer algo como el fondo de paralaje de nikebetterworld.com. En mi primer intento, obtuve algo que funciona, pero puede funcionar mejor. Cuando me desplazo, la posición de fondo cambia. El problema es que cambia unos pocos milisegundos después del desplazamiento, por lo que puedo ver cómo el fondo "salta" después de desplazarse.Evento de desplazamiento más rápido? - Fondo "salta" después de desplazarse

código:

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

¿Alguna sugerencia? Gracias.

Editar

vistazo a este ejemplo: http://jsfiddle.net/MZGHq/ (desplácese hacia abajo hasta que vea la imagen de fondo)

Fuente

2011-10-09 ezakto

El código de Nike que parece hacer la funcionalidad en cuestión se puede encontrar aquí: http://www.nikebetterworld.com/lib/js/com.nikebetterworld .js? 0.1.0.0 –

La pregunta es sobre el performa nce problema en mi intento actual:/ – ezakto

La clave es utilizar un fondo fijo si debe tenerlo sin problemas. Ver http://jsfiddle.net/MZGHq/7/

Referencias:

Esta página parece tener una buena explicación de cómo funciona el efecto de paralaje vertical: http://www.webdesignshock.com/one-page-website/

también echar un vistazo a este (que no utilizan fondo fijo .. .note cómo se ve un poco nervioso como el tuyo): http://www.franckmaurin.com/the-parallax-effects-with-jquery/

Fuente

2011-10-22 01:51:29 Muhd

Gracias amigo, ese es el truco. – ezakto

Cambiar a la posición: arreglado evita que el navegador vuelva a dibujar la etiqueta antes de meterse con ella a través de Javascript, por lo que evita los nervios, pero presenta complicaciones no triviales con las que debe lidiar. Su posición horizontal ahora es relativa a la ventana gráfica, no al documento ni al contenedor colocado, por lo que el desplazamiento horizontal y el ancho del navegador pueden presentar problemas nuevos. –

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

creo que el problema es la 0.5. Cuando calcule la nueva posición, hay suficiente diferencia entre la ubicación anterior y la nueva para que sea un cambio perceptible.

Cambio 0,5 a 0,2 o inferior minimiza esto un poco, sin embargo, el efecto de paralaje es menos pronunciada - que no es lo que desea.

me gustaría probar un enfoque diferente - echar un vistazo a GitHubs página 404 como un ejemplo: https://github.com/ddflsdigjh;ad

Fuente

2011-10-11 04:40:38 donohoe

uso 'fijo' fondo
el desplazamiento de la posición de fondo debe ser mucho más grande que la de desplazamiento (no 0.5 pero 0.01) parecía que el problema solo ocurría en FF. Este es el navegador más lento en la reorganización de páginas y javascript.

Fuente

2011-10-12 09:52:04 holden321

Evento de desplazamiento más rápido? - Fondo "salta" después de desplazarse

Respuesta

Cuestiones relacionadas