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 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.

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/.

Answer 2

You can do this without jquery by using CSS3 animations. I'm assuming the city background image is set up to repeat-x seamlessly on the container.

You set up your keyframes to animate the background image the width of the repeatable image and tell it to loop infinitely with no delay. For example, my drifting clouds image is 1456 px wide and repeats x:

@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}

Make sure you set @-webkit-keyframes, @-moz-keyframes, @-o-keyframes and -webkit-animation, -moz-animation, -o-animation the same to cover FF, Safari and Chrome.

http://jsfiddle.net/JQjGZ/