Moving Background image in a loop from left to right

Question

I would like to have a moving background image on my page from left to right exactly the same way as in following website http://kxip.in , please suggest how to achieve this.

Thanks & Regards

Answer 1

An interesting question with a challenging solution. Thankfully, stackoverflow.com is here to help you do your work!

Obviously, you'll need jQuery! So, grab some jQuery and then come back.

Back? Great.

Let's start off. First, add this bit of line to your code:

$(function(){

})

So, what is that $ magic stuff? Nevermind you actually learning that! We're here to get answers, not learn! But, if you're the curious type, open up a new tab and ask the following question on stackoverflow.com, "what is this $(function(){ }) stuff". Someone will fill you in! Don't forget to tag JQUERY!

Ok, we want to animate a background image. TOUGH. Of course, there are a lot of ways to do this (HTML, CSS, and JAVASCRIPT always have more than one way to do this!) but I prefer the JQuery way. Remember that weird dollar signy stuff at the top? Let's go back to that!

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

    }, 500);
})

We just added some more programs! setInterval is a counter that counts up to 500 milliseconds and then runs the code inside. Why 500? I don't know, I just like magic numbers. So we have a timerjiggymathing, we need some more programs in it. How do we add a background?

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

Ok, now we're getting somewhere! Our jQueries are actually now setting the background position to 0, 0. Not so interesting yet. Let's see if we can do some more.

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

Let's test it out!

http://jsfiddle.net/hY5Dx/

Oh man. That image is way too big and the stupid kitten is going UP! Back to the codes.

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

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

Ahhh, more like it! But, man...is it awfully slow. Let's upgrade that!

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

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

OH SNAPPPPPP. We got some scrolling kittenz now! JavaQuery is AWESOME!

To be honest though, that background image isn't doing justice. Time to update that!

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

Oh yeah, now we're kicking!!!

SO, there you have it! 1 of many, MANY ways to do what you want to do.

GOOD LUCK. HAVE FUN.

Answer 2

Here is a css solution:

FIDDLE

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