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

The main idea behind the rotating background is that you draw two images: one at (x, 0) and another at (x - w, 0) with w being the width of the image. You can increase x over time, and as soon as x === w you reset x = 0. You won't visually see this reset because the second image is positioned at the exact same position as the first. After resetting, you can start all over again, so that the rotating looks endless.

(I'm using two images assuming width of container <= width of image.)

You could use e.g.:

• Canvas: http://jsfiddle.net/yQMAG/. This animation is a bit jerky on my machine.
• CSS3 animations: http://jsfiddle.net/k5Bug/.