web-dev-qa-db-fra.com

Déplacement de l'image de fond en boucle de gauche à droite

J'aimerais que la page affiche une image de fond en mouvement, de gauche à droite, exactement de la même manière que sur le site Web suivant http://kxip.in , veuillez suggérer comment y parvenir.

Merci et salutations

javascripthtmlcsshtml5background-image
9
user3378013

Une question intéressante avec une solution difficile. Heureusement, stackoverflow.com est là pour vous aider à faire votre travail!

De toute évidence, vous aurez besoin de jQuery! Alors, prenez un peu de jQuery et revenez.

Retour? Génial.

Commençons. Tout d’abord, ajoutez ce bout de ligne à votre code:

$(function(){

})

Alors, quelle est cette substance magique $? Peu importe que vous appreniez réellement cela! Nous sommes ici pour obtenir des réponses, pas apprendre! Mais si vous êtes du genre curieux, ouvrez un nouvel onglet et posez la question suivante sur stackoverflow.com, "qu'est-ce que c'est $(function(){ })". Quelqu'un va vous renseigner! N'oubliez pas de taguer JQUERY!

Ok, nous voulons animer une image d’arrière-plan. DURE. Bien sûr, il existe de nombreuses façons de le faire (HTML, CSS et JAVASCRIPT ont toujours plus d’un moyen de le faire!), Mais je préfère la méthode JQuery. Tu te souviens de ces trucs bizarres en dollars au sommet? Revenons à ça!

$(function(){
    setInterval(function(){

    }, 500);
})

Nous venons d'ajouter quelques programmes supplémentaires! setInterval est un compteur qui compte jusqu'à 500 millisecondes, puis exécute le code à l'intérieur. Pourquoi 500? Je ne sais pas, j'aime juste les nombres magiques . Nous avons donc une minuterie, nous avons besoin de plus de programmes. Comment pouvons-nous ajouter un fond?

$(function(){
    setInterval(function(){
        $('body').css('background-position', '0 0');
    }, 500);
})

Ok, maintenant nous allons quelque part! En fait, nos jQueries règlent actuellement la position d’arrière-plan sur 0, 0. Pas si intéressant pour le moment. Voyons si nous pouvons en faire plus.

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', '0 ' + x + 'px');
    }, 500);
})

Testons-le! 

http://jsfiddle.net/hY5Dx/

Oh mec. Cette image est beaucoup trop grande et le chaton stupide monte! Retour aux codes.

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 500);
})

http://jsfiddle.net/hY5Dx/1/

Ahhh, plus comme ça! Mais, mec ... est-ce terriblement lent. Améliorons cela!

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', x + 'px 0');
    }, 10);
})

http://jsfiddle.net/hY5Dx/2/

OH SNAPPPPPP. Nous avons quelques chaton de défilement maintenant! JavaQuery est IMPRESSIONNANT!

Pour être honnête, cette image de fond ne rend pas justice. Il est temps de mettre à jour cela!

http://jsfiddle.net/hY5Dx/3/

Oh oui, maintenant on se bat !!!

SO, là vous l'avez! Une des nombreuses façons de faire ce que vous voulez faire.

BONNE CHANCE. S'AMUSER.

46
Jack

Voici une solution CSS:

VIOLON

body {
    background: url(http://kxip.in/images/mohalistadium.jpg) repeat;
    -webkit-animation: loader 16s steps(100) infinite;
    -moz-animation: loader 16s steps(100) infinite;
    -ms-animation: loader 16s steps(100) infinite;
    -o-animation: loader 16s steps(100) infinite;
    animation: loader 16s steps(100) infinite;
}

@-webkit-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-moz-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-ms-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@-o-keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
@keyframes loader {
  from {
    background-position: 0;
  }
  to {
    background-position: -1600px 0;
  }
}
7
Danield

C'est facile! Il suffit d'utiliser du javascript simple!

Commander le jsFiddle

Code:

<html>
<head>
    <title>BackGround Slide</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
         // speed in milliseconds
         var scrollSpeed = 70;

         // set the default position
         var current = 0;

         // set the direction
         var direction = 'h';

         function bgscroll() {

             // 1 pixel row at a time
             current -= 1;

             // move the background with backgrond-position css properties
             $('body').css("backgroundPosition", (direction == 'h') ? current + "px 0" : "0 " + current + "px");

         }

         //Calls the scrolling function repeatedly
         setInterval("bgscroll()", scrollSpeed);
    </script>
    <style type="text/css">
        body {
            background-image: url('http://kxip.in/images/mohalistadium.jpg');
        }
    </style>
</head>
<body>

</body>
</html>
0
Krimson

Utilisez des js/jQuery:

function move(){
    var element = $('#selector');
    element .css('background-position-x', (parseInt(element.css('background-position-x') - 10));
    //Check if need to reset background-position-x to Origin.
}
0
Justinas

Le moyen le plus simple pour y parvenir est, je crois, d’utiliser un peu de Javascript . Vous pouvez trouver le code javascript qu’ils peuvent utiliser comme exemple ici: http://kxip.in/js/ background-moving.js

 // speed in milliseconds
var scrollSpeed = 70;

// set the default position
var current = 0;

// set the direction
var direction = 'h';

function bgscroll() {

  // 1 pixel row at a time
  current -= 1;

  // move the background with backgrond-position css properties
  $('div.background-image').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}

//Calls the scrolling function repeatedly
setInterval("bgscroll()", scrollSpeed);

Je vous exhorte toutefois à ne pas simplement copier et coller car cela ne fonctionnera probablement pas pour vous.

0
user3274237

vous pouvez utiliser la balise Marquee en HTML5. vous pouvez voir les exemples dans http://www.quackit.com/html/codes/html_Marquee_code.cfm .

0
Atousa