¿Cómo se resuelve el elemento parpadeante mientras se desplaza con el efecto de paralaje en JavaScript?

Question

Estoy tratando de volver a crear el sitio web con efecto de paralaje usando JavaScript. Eso significa que tengo dos o más capas, que se mueven a diferentes velocidades mientras se desplaza.

En mi caso, estoy moviendo solo una capa, la otra permanece estática: capa 1 = texto del sitio web; capa 2 = fondo del elemento;

por esto que estoy usando el código fuente simple (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(); 
}); 

El problema: - Todos los cálculos se hacen bien y el efecto "obras" como se esperaba. Pero hay algunos problemas de rendimiento en algunos navegadores (Chrome MAC/Windows, Opera MAC, IE, paradójicamente no Safari).

¿Qué veo durante el desplazamiento? - Mientras se desplaza, el fondo se mueve en una dirección junto con el desplazamiento, pero ocasionalmente salta algunos píxeles hacia atrás y hacia adelante, lo que crea un efecto muy perturbador (no fluido).

Soluciones que probé: - agregando un temporizador para limitar los eventos de desplazamiento - usando el método .animate() de corta duración en lugar del método .css().

También he observado que la animación es fluida cuando se usa el método .scrollTo (plugin scrollTo jQuery). Así que sospecho que hay algo mal con disparar eventos de desplazamiento (demasiado rápido).

¿Has observado el mismo comportamiento? ¿Sabes cómo solucionarlo? ¿Se puede publicar una mejor solución?

Gracias por todas las respuestas

editar # 1: Aquí puede encontrar demostración jsFiddle (con temporizador): http://jsfiddle.net/4h9Ye/1/

Answer 1

pienso que usted debe utilizar scrollTop() en su lugar y cambiar la posición de fondo para fijo. El problema es que establecerlo en absoluto hará que se mueva de forma predeterminada cuando se desplaza hacia arriba o hacia abajo.

El parpadeo se produce porque la posición se actualiza como parte del desplazamiento predeterminado del navegador y se actualiza de nuevo como parte de su secuencia de comandos. Esto representará ambas posiciones en lugar de solo la que desea. Con fijo, el fondo nunca se moverá a menos que así lo diga.

He creado una demostración para ti en http://jsfiddle.net/4h9Ye/2/.