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

问题

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.

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

回答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/

回答3:

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

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

回答5:

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

回答6:

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

来源：https://stackoverflow.com/questions/11170173/html5-css3-how-to-make-endless-rotating-background-360-degrees-panorama

标签

jquery

css

html5

jquery-animate