jQuery en la ventana de desplazamiento animar la posición de la imagen de fondo

Estoy tratando de lograr un efecto de desplazamiento usando jQuery. Tengo un div de fondo configurado al 100% de tamaño de ventana del navegador con desbordamiento oculto. Esto tiene una gran imagen de fondo que es aprox. 1500px x 2000px.jQuery en la ventana de desplazamiento animar la posición de la imagen de fondo

El efecto que deseo es que cuando el usuario se desplace por la página la imagen de fondo se mueva a un porcentaje de la distancia desplazada, de modo que por cada 200px desplazado hacia abajo la imagen se mueve 10px en la misma dirección.

¿Alguien puede indicarme la dirección correcta? ¿Esto es posible? :) Muchas gracias de antemano.

ACTUALIZACIÓN

Desde entonces he intentado variaciones en la sugerencia de @Capt Otis, pero todavía estoy luchando por el código que estoy jugando con es el siguiente:

$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
     $('#div').animate({'background-postion': '+=10px 0'}, 500); 
    } 
});

¿Alguien puede arrojar alguna luz en lo que estoy haciendo mal?

Fuente

2011-02-15 mtwallet

Aquí tienes. El fondo está configurado en 10% de desplazamiento. Puede cambiar la velocidad de desplazamiento de fondo cambiando los 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'); 
});

Comprobar ejemplo de trabajo en http://jsfiddle.net/Vbtts/
Haga clic en este enlace para el ejemplo de pantalla completa: http://jsfiddle.net/Vbtts/embedded/result/

Fuente

2011-02-21 09:36:23 Hussein

@Hussien probó su sugerencia (¡muchas gracias!) Pero aún no funciona. Me di cuenta en jsfiddle que estás usando la interfaz de usuario de jQuery, que todavía no soy. ¿De qué parte depende esto? ¿Es posición? – mtwallet

@mtwallet jQuery UI no tiene nada que ver con el código. Puedes prescindir de eso. Es solo un habbit que incluyo tanto la interfaz de usuario como jQuery cuando uso jsfiddle. – Hussein

@Hussien en cuyo caso no estoy seguro de lo que estoy haciendo mal. He configurado mi propio JSFiddle si no te importa echar un vistazo rápido. http://jsfiddle.net/nicklansdell/HFxVj/ – mtwallet

Mire here para ver un ejemplo de la distancia recorrida por el usuario en la página. Ver el $(this).scrollTop()?

En lugar de hacer referencia a $ (esto), intente utilizar el div de fondo. Luego use una función .scroll para determinar cuánto mover el fondo.

El código debería ser algo algo así como esto:

$("html").scroll(function{ 
    var move["bottom"] = $("bg_div").scrollTop(); 
    $("bg_div").animate({bottom: move}, 500); 
});

Fuente

2011-02-15 08:55:20

no creo que se puede utilizar + = o - = cuando se tienen dos partes en el CSS. Hay algo que puede hacer, es un poco complicado pero funciona:

$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
     var bgpos = $("#div").css("background-position"); 
     var bgposInt = 0; 
     if(bgpos.indexOf("px")!=-1) { 
      bgpos = bgpos.substr(bgpos.indexOf("px")+3); 
      bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px"))); 
     } 
     bgposInt += 10; 
     $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500); 
    } 
});

Este código obtiene el segundo número de la background-position de la div (la primera posición), la convierte a int, y lo aumenta en 10. Entonces simplemente anima el div a la nueva posición.

Fuente

2011-02-17 11:56:32 Cokegod

Gracias por la respuesta. He intentado diferentes variaciones de este código pero no puedo hacer que funcione, me temo. – mtwallet

Esto podría hacerlo:

$(window).scroll(function(){ 
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05)); 
})

Fuente

2011-02-19 12:08:30 Gareth

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;

Dónde #main es el div cuya imagen de fondo que quería moverse. No es necesario tener altura: 100% para html, cuerpo.

Esta es una variación de varias imágenes de fondo.

Fuente

2012-03-14 12:59:20 stormwild

Si usted no quiere ser presionado con el fondo div adicional, aquí está mi código Envolví a de algunos 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"); 
}

El Math.max se requiere para los problemas a través del navegador. 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; 
}

Fuente

2013-04-30 21:35:25 breez

jQuery en la ventana de desplazamiento animar la posición de la imagen de fondo

Respuesta

Cuestiones relacionadas