HTML5/CSS3 - how to make "endless" rotating background - 360 degrees panorama
css, html, jquery, jquery-animate
Solution
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/.
Problem
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 impression of rotating webcamera, for example. The first part - scrolling from left to the very right of the image is very simple - just use jQuery.animate(...). But how can I return seamlessly to the beginning of the image (after it has completed 359 degree turn), so user won't notice "jump" or something like that? Is there any examples on the web probably? I'm targeting HTML5/CSS3 (webkit) browser only, and I can use the latest jQuery. Thank you.