11

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

user3378013
  • 111
  • 1
  • 1
  • 3

6 Answers6

55

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.

Jack
  • 9,151
  • 2
  • 32
  • 44
9

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;
  }
}
Danield
  • 121,619
  • 37
  • 226
  • 255
  • 1
    How does a css solution not have way more upvotes? Btw, the image in your example is gone. – Mark Jan 31 '16 at 01:39
1

Its easy! Just use some simple javascript!

Checkout the 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>
Community
  • 1
  • 1
Krimson
  • 7,386
  • 11
  • 60
  • 97
-1

Use some 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.
}
Justinas
  • 41,402
  • 5
  • 66
  • 96
-1

The easiest way to achieve this i believe is to use using a little bit of Javascript. You can find the javascript they user to use as an example here: 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);

I urge you however not to simply copy and paste because this will likely not work for you.

Darwind
  • 7,284
  • 3
  • 49
  • 48
user3274237
  • 1
  • 2
-1

you can use marquee tag in HTML5. you can see the examples in http://www.quackit.com/html/codes/html_marquee_code.cfm.

Atousa
  • 35
  • 1
  • 7