HTML5/CSS3 - how to make “endless” rotating background - 360 degrees panorama

Question

i have a JPG image with the 360 degrees view of the city (9000px by 1000px). I need to create a page with endlessly rotating background - giving user an impress

Answer 1

You could use CSS animations to achieve such a "look around" effect - great for parallax!

Instead of adding multiple images and animating their left etc, you could just set a background and animate its background-position:

#bgscroll {  
    background:url(/*some nice seamless texture*/);
    -moz-animation-duration: 13s;  
    -moz-animation-name: bgscroll;
    -moz-animation-iteration-count: infinite;
}  
@-moz-keyframes bgscroll{  
    from {background-position: 0 0;}
    to   {background-position: 100% 0;}  
} 

This would work with new Gecko/Chromium browsers (w/vendor prefix adjusted); fiddled