jQuery Girl
  1. jQuery Girl
  3. jQuery on window scroll animer la position de l’image d’arrière-plan
Intereting Posts
jquery pour vérifier le type et la taille du fichier avant de soumettre Si une fonction jQuery s’appelle dans son rappel d’achèvement, est-ce un danger récursif pour la stack? Affecter dynamicment des propriétés à un object JS À quel endroit de la grid appartient la tuile Saisie et validation jQuery Watermarked Rendre réactives les fonctionnalités des ensembles réductibles dans JQuery Mobile Comment passer des données d’une page HTML à la seconde en php? Comment convertir une requête GET en POST Récupérer le contenu de dans une chaîne Comment conserver l’état d’entrée radio lors de l’actualisation de la page Si des données existent dans la firebase database, le bouton Editer doit être affiché, sinon, Ajouter un bouton sans rechargement de page dans la fonction de réussite ajax Rendre insensible à la casse les expressions régulières Javascript Empêcher plusieurs événements de clic de déclencher JQuery chargez une division HTML externe dans master.html div à l’aide de plusieurs éléments de menu et d’une instruction JS jsTree ne crée pas de noeud d’un type spécifique

jQuery on window scroll animer la position de l’image d’arrière-plan

J’essaie d’obtenir un effet de défilement à l’aide de 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 en fonction d’un pourcentage de la distance parcourue. Ainsi, pour chaque défilement de 200 images sur la page, l’image se déplace de 10 images 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 m’éclairer sur ce que je fais mal?

    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; } 
     ..

    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/

    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.

    Si vous ne voulez pas être dérangé 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 requirejs 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; }

    Cela pourrait le faire: 

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

    Regardez ici pour voir un exemple de la distance parcourue par l’utilisateur sur la page. Voir le $(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); });

    Je ne pense pas que vous puissiez utiliser + = ou – = lorsque vous avez deux parties dans le CSS. Il y a quelque chose que vous pouvez faire, c’est un peu compliqué mais ça marche: 

     $(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.