Question

我有一个带有城市360度视图的JPG图像（9000像素×1000像素）。我需要创建一个页面，其中无休止地旋转背景 - 例如，给用户留下旋转网络摄像头的印象。

第一部分 - 从图像的左侧滚动到最右侧非常简单 - 只需使用jQuery.animate（...）。但是如何无缝地返回到图像的开头（在它完成359度转弯之后），这样用户就不会注意到“跳跃”或类似的东西？

网上是否有任何示例？

我只针对HTML5 / CSS3（webkit）浏览器，我可以使用最新的jQuery。

谢谢。

Answer 1

旋转背景背后的主要思想是绘制两个图像：一个在(x, 0)，另一个在(x - w, 0)，w是图像的宽度。您可以随着时间的推移增加x，并且只要x === w重置x = 0即可。您不会在视觉上看到此重置，因为第二个图像位于与第一个图像完全相同的位置。重置后，您可以重新开始，以便旋转看起来无穷无尽。

（我假设width of container <= width of image使用了两张图片。）

您可以使用例如：

画布：http://jsfiddle.net/yQMAG/。这个动画在我的机器上有点不稳定。
CSS3动画：http://jsfiddle.net/k5Bug/。

Answer 2

您可以使用CSS3动画在没有jquery的情况下执行此操作。我假设城市背景图像设置为在容器上无缝重复x。

设置关键帧，为背景图像设置可重复图像的宽度，并告诉它无限循环，没有延迟。例如，我的漂移云图像宽度为1456像素，并重复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;
}

确保将@ -webkit-keyframes，@ -moz-keyframes，@ -o-keyframes和-webkit-animation，-moz-animation，-o-animation设置为同样来覆盖FF，Safari和Chrome。

http://jsfiddle.net/JQjGZ/

Answer 3

那里有解决方案，他们称之为人们为插件制作的“图像拼接”。

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

这个也非常适合移动设备。 http://spritespin.ginie.eu/examples.html

Answer 4

如果您只定位webkit浏览器，则可以单独使用CSS3完成此操作。 CSS3内置了对动画的支持。通过使用iteration-count属性指定'infinite'，您的动画将永远持续下去......你明白了这一点; - ）

@-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;

}

当然，HTML中的图片：

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

Answer 5

您可以使用背景位置和jquery动画功能，请参阅示例：

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

在完整事件中采用无穷无尽的背景和动画从0到背景的宽度，将背景位置设置为0并再次触发动画。

Answer 6

您可以使用CSS animations来实现这种“环顾四周”效果 - 非常适合视差！

您可以设置背景并为其left设置动画，而不是添加多个图像并为其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;}  
}

这适用于新的Gecko / Chromium浏览器（调整供应商前缀）; fiddled

HTML5 / CSS3 - 如何制作“无尽的”旋转背景 - 360度全景

6 个答案: