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

generatepress woocommerce

Question

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.

El efecto que quiero 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 200 píxeles desplazados hacia abajo la imagen se mueve 10 píxeles en la misma dirección.

¿Alguien puede señalarme en la dirección correcta? ¿Esto es posible? : ) Muchas gracias de antemano.

ACTUALIZAR

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

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

¿Alguien puede arrojar algo de luz sobre lo que estoy haciendo mal?

Answer 1

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

Ver 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/

Answer 2

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.

Answer 3

Esto podría hacerlo:

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

Answer 4

Mire aquí para ver un ejemplo de cuánto ha recorrido 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.

Tu código debería verse más o menos así:

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

Answer 5

No creo que puedas usar + = o - = cuando tienes dos partes en el CSS. Hay algo que puedes 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 solo el segundo número de la posición de fondo del div (la posición superior), lo convierte a int, y lo aumenta en 10. Luego solo anima el div a la nueva posición.

Answer 6

Si no quieres que te molesten con el div de fondo adicional, aquí está mi código que envolví 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");
}

Math.max es necesario 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;
}