web-dev-qa-db-fra.com

jQuery sur le défilement de la fenêtre animer la position de l'image d'arrière-plan

J'essaie d'obtenir un effet de défilement avec jQuery. J'ai une définition de fond définie sur 100% de la taille de la fenêtre du navigateur, le débordement étant masqué. Cela a une grande image de fond qui est d'env. 1500px x 2000px. 

L'effet souhaité est que lorsque l'utilisateur fait défiler la page, l'image d'arrière-plan se déplace selon un pourcentage de la distance parcourue. Ainsi, pour chaque 200 pixels de la page, l'image se déplace de 10 pixels dans la même direction.

Est-ce que quelqu'un peut-il me montrer la bonne direction? Est-ce seulement possible? : ) Merci d'avance.

METTRE À JOUR

Depuis, j'ai essayé différentes variantes de la suggestion de @Capt Otis, mais le code avec lequel je joue est toujours problématique:

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

Quelqu'un peut-il nous éclairer sur ce que je fais mal?

jqueryimagebackgroundscrolljquery-animate
18
mtwallet

Voici. L'arrière-plan est défini sur 10% de défilement. Vous pouvez modifier le taux de défilement en arrière-plan en modifiant le 10 dans le code.

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

Consultez l'exemple de travail sur http://jsfiddle.net/Vbtts/
Cliquez sur ce lien pour voir l'exemple en plein écran: http://jsfiddle.net/Vbtts/embedded/result/

54
Hussein

Cela a fonctionné pour moi:

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;

Où #main est la div dont je voulais déplacer l'image de fond. Pas besoin d'avoir de hauteur: 100% pour le HTML, le corps.

Ceci est une variation pour plusieurs images d'arrière-plan.

5
stormwild

Si vous ne voulez pas être harcelé par la division d'arrière-plan supplémentaire, voici mon code que j'ai résumé à partir de plusieurs exemples:

$(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 est requis pour les problèmes entre navigateurs. Remplacez également "1920" par la largeur de votre image d'arrière-plan

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
5
breez

Cela pourrait le faire:

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

Regardez ici pour voir un exemple de la distance parcourue par l'utilisateur sur la page. Voir la $(this).scrollTop()?

Plutôt que de faire référence à $ (this), essayez d’utiliser la div de fond. Ensuite, utilisez une fonction .scroll pour déterminer la quantité de fond à déplacer. 

Votre code devrait ressembler à quelque chose comme ça:

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

Je ne pense pas que vous puissiez utiliser + = ou - = lorsque vous avez deux parties dans le fichier CSS . Il y a quelque chose que vous pouvez faire, c'est un peu compliqué mais cela fonctionne:

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

Ce code n'obtient que le deuxième nombre de la position d'arrière-plan de la div (la position la plus haute), le convertit en entier et l'augmente de 10. Ensuite, il anime simplement la div vers la nouvelle position.

0
Cokegod