jQuery sur de défilement de la fenêtre d'animer l'image de fond de position

Je suis en train de réaliser un effet de défilement à l'aide de jQuery. J'ai un arrière-plan div à 100% la taille de la fenêtre du navigateur avec trop-plein caché. Cela a une grande image de fond qui est d'environ. 1500px x 2000px.

L'effet que je veux, c'est quand l'utilisateur fait défiler la page, l'image de fond se déplace à un pourcentage de la volutes de la distance, donc pour tous les 200px défile en bas de la page, l'image se déplace 10px dans la même direction.

Quelqu'un peut me pointer dans la bonne direction? Est-ce même possible? : ) Merci beaucoup à l'avance.

Mise à JOUR

Depuis, j'ai essayé de variations sur la suggestion de @Capt Otis mais je suis toujours en difficulté le code je joue est comme suit:

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

Quelqu'un peut nous donner un indice sur ce que je fais de mal?

InformationsquelleAutor mtwallet | 2011-02-15

54

Ici vous allez. Arrière-plan est fixé à 10% de défilement. Vous pouvez modifier la vitesse de défilement de fond en changeant 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');
});
```
Vérifier exemple de travail à http://jsfiddle.net/Vbtts/

Cliquez sur ce lien pour le plein écran exemple: http://jsfiddle.net/Vbtts/embedded/result/
- essayé ta suggestion (merci beaucoup!) mais ne fonctionne pas encore. J'ai remarqué sur jsfiddle vous êtes à l'aide de jQuery UI qui je ne suis pas encore. La partie n'cela dépend, est-il de la position?
- jQuery UI n'a rien à voir avec le code. Vous pouvez faire sans elle. C'est juste un habbit que je comprennent à la fois une INTERFACE utilisateur jQuery lorsque j'utilise jsfiddle.
- auquel cas, pas sûr de ce que je fais mal. J'ai mis en place mon propre JSFiddle si vous ne me dérange pas d'avoir un coup d'oeil. jsfiddle.net/nicklansdell/HFxVj
- vous avez besoin d'avoir body, html{height:100%; min-height:100%;} pas juste le corps. Check it out ici jsfiddle.net/HFxVj/2
- Génial que fonctionne un régal! Merci beaucoup pour toute votre aide. 50 points de venir à votre façon! : )
- :- )) À tout moment....
- Merci beaucoup, Hussein. Une telle belle, la solution la plus simple.
- Probablement la peine de vérifier requestAnimationFrame trop pour des animations plus fluides - ici est une boucle que j'ai trouvé sur google gist.github.com/Warry/4254579
InformationsquelleAutor 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ù #principal est la div dont l'image de fond, je voulais déménager. Pas besoin d'avoir de la hauteur: 100% pour le html, le corps.

C'est une variante de plusieurs images d'arrière-plan.

InformationsquelleAutor stormwild

Si vous ne voulez pas être pressé avec le fond de la div, voici mon code, je l'ai enveloppé par 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");
}

Les Mathématiques.max est requis pour la croix-les problèmes de navigateur. Également remplacer "1920" avec 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;
}

InformationsquelleAutor breez

Cela pourrait le faire:

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

InformationsquelleAutor Gareth

0

Look ici pour voir un exemple de la façon dont beaucoup de l'utilisateur est déjà sur la page. Voir la $(this).scrollTop()?

Plutôt que de référencement $(this), essayez en utilisant le fond de la div. Ensuite, utilisez un .fonction de défilement afin de déterminer combien de déplacer l'arrière-plan.

Votre code devrait ressembler à quelque chose comme ceci:
```
$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});
```
InformationsquelleAutor Capt Otis

Je ne pense pas que vous pouvez utiliser += ou -= quand vous avez les deux pièces dans le CSS.
Il y a quelque chose que vous pouvez faire, c'est un peu délicat, mais il 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 devient seulement le deuxième numéro de la background-position de la div (position haute), la convertit en int, et l'augmente de 10. Puis il anime la div à la nouvelle position.

Merci pour la réponse. J'ai essayé différentes variantes de ce code mais impossible de le faire fonctionner, j'ai peur.

InformationsquelleAutor Cokegod

Vous devez vous connecter pour publier un commentaire.