Infinite Scrolling Background

by cliftonyeo

HTML

<div id="frame">
    
    <div id="slide"></div>
    
</div>

<img src="http://www.mariowiki.com/images/d/d9/MarioNSMBWii.PNG">

CSS

#frame {
    width: 520px;
    height: 391px;
    background: darkblue;
    overflow: hidden;
}

#slide {
   position: relative;
   width: 1040px;
   height: inherit;
   background: url("http://jongerla.ch/wp-content/uploads/2012/02/JPG_Blog_BackgroundAnimation_3.gif");
}

img {
 position: relative;
 top: -147px;
 left: 300px;
 max-width: 100px;
}

JavaScript

var bgWidth = 520;
var position = 0;
var speed = .9;
var slide = $('#slide');

setInterval(animateBackground, 20);


function animateBackground() {

    position = position - speed;
    
    if(position < -bgWidth) {
        position = 0;
    }
        
    slide.css('left', position);
}