Estoy tratando de lograr un efecto de desplazamiento usando jQuery. Tengo un div de fondo configurado al 100% del tamaño de la ventana del navegador con el desbordamiento oculto. Esto tiene una imagen de fondo grande que es de aprox. 1500px x 2000px.
El efecto que quiero es cuando el usuario se desplaza hacia abajo en la página, la imagen de fondo se mueve a un porcentaje de la distancia desplazada, por lo que por cada 200 px que se desplaza hacia abajo en la página, la imagen se mueve 10 px en la misma dirección.
¿Alguien puede señalarme en la dirección correcta? ¿Es esto posible? : ) Muchas gracias de antemano.
ACTUALIZAR
Desde entonces, probé variaciones de la sugerencia de @Capt Otis, pero todavía tengo problemas. El código con el que estoy jugando es el siguiente:
$(window).scroll(function(){ if($(this).scrollTop() > 200) { $('#div').animate({'background-postion': '+=10px 0'}, 500); } });¿Alguien puede arrojar alguna luz sobre lo que estoy haciendo mal?
Aquí tienes. El fondo se establece en un 10 % de desplazamiento. Puede cambiar la velocidad de desplazamiento de fondo cambiando el 10 en el código.
CSS
html, body{ height:100%; min-height:100%; margin:0; padding:0; } .bg{ width:100%; height:100%; background: #fff url(..) no-repeat fixed 0 0; overflow:auto; } <div class="bg"> <span>..</span> </div>JavaScript
$('.bg').scroll(function() { var x = $(this).scrollTop(); $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px'); }); Consulte el ejemplo de trabajo en http://jsfiddle.net/Vbtts/
Haga clic en este enlace para ver el ejemplo de pantalla completa: http://jsfiddle.net/Vbtts/embedded/result/
Si no quiere que lo molesten con el div de fondo adicional, aquí está mi código que completé a partir de varios ejemplos:
$(window).scroll(function () { setBackgroundPosition(); }) $(window).resize(function() { setBackgroundPosition(); }); function setBackgroundPosition(){ $("body").css('background-position', "-" + (1920 - $(window).width()) / 2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop) / 4) + "px"); }Se requiere Math.max para problemas entre navegadores. También reemplace '1920' con el ancho de su imagen de fondo
body{ background-image:url(images/background.jpg); background-position:center top; background-repeat:no-repeat; background-attachment:fixed; }Esto funcionó para mí:
En js:
$(window).scroll(function() { var x = $(this).scrollTop(); $('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top'); });En CSS:
#main { background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png); background-repeat: no-repeat, no-repeat, repeat-x; background-position: right top, left top, center top;Donde #main es el div cuya imagen de fondo quería mover. No es necesario tener altura: 100% para html, cuerpo.
Esta es una variación para múltiples imágenes de fondo.