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

There's solutions out there that they call "image-stitching" that people have made plugins for.

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

This one works great for mobile too. http://spritespin.ginie.eu/examples.html

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/

Answer 3

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

Answer 4

you can play with the background position and the jquery animate function , see the example:

http://jsfiddle.net/DG8PA/3/

Take a endless background and animate from 0 to the width of background in the complete event set the background position to 0 and fire another time the animation.

Answer 5

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 6

If you're only targeting webkit-browsers, you can accomplish this with CSS3 alone. CSS3 has built-in support for animations. By specifying 'infinite' with the iteration-count property, your animation will go on forever and ever and... You get the point ;-)

@-webkit-keyframes rotateEndlessly
{
    from 
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to 
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

img 
{
    -webkit-animation-name: rotateEndlessly;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

}

And of course, the image in your HTML:

<img src="image.jpg" alt="image" />