Question

I am making a website for a restaurant. The owners took a panoramic picture of the inside and want it in the site’s BG panning/skimming over the panaroma. So basically the panaroma would be the BG and would need to be rotating or panning over the image. Is this possible? I was thinking maybe with some sort of jQuery that would change the position of the image in slow motion or something, but not every adequate with jQuery to come up with the needed code. I almost resorted to animate.css but I need at least IE8 and above browser compatibility.

Thanks in advance. 🙂

Answer 1

Here’s the poor-man’s version:

​.slide {
 height:160px;
 width:50px;
 background-position:160px 0;    
 background-image:url(http://i.imgur.com/vdDQgb.jpg)  
}

HTML:

<div class="slide"></div>
<div id="num"></div>

JS:

var limit = 60;
var start = 120;    
var moveBy = 1;    
var timer1 = setInterval(function() {  
    $('#num').text(start);
    $('.slide').css('background-position',start+'px 0') ;
    start--;
    if(start<0) {
       alert("done"); 
       clearTimeout(timer1);
    }    
},50)