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

Posted

技术标签:

【中文标题】HTML5/CSS3 - 如何制作“无尽”旋转背景 - 360 度全景【英文标题】:HTML5/CSS3 - how to make "endless" rotating background - 360 degrees panorama 【发布时间】:2012-06-25 13:51:30 【问题描述】:

我有一张 JPG 图像,其中包含 360 度城市景观(9000 像素 x 1000 像素)。我需要创建一个具有无限旋转背景的页面 - 例如,给用户一个旋转网络摄像头的印象。

第一部分 - 从左到右滚动图像非常简单 - 只需使用 jQuery.animate(...)。但是我怎样才能无缝返回到图像的开头(在完成 359 度转弯之后),这样用户就不会注意到“跳跃”或类似的东西?

网上大概有例子吗?

我只针对 html5/CSS3 (webkit) 浏览器,我可以使用最新的 jQuery。

谢谢。

【问题讨论】:

用画布好吗?这是草稿:jsfiddle.net/yQMAG. 哇!看起来很有希望。这是用于 PlayBook 平板电脑的 - 我希望画布在那里工作。你能回答一下吗? 【参考方案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/.

【讨论】:

【参考方案2】:

您可以使用 CSS3 动画在不使用 jquery 的情况下做到这一点。我假设城市背景图像设置为在容器上无缝地重复-x。

您将关键帧设置为以可重复图像的宽度为背景图像设置动画,并告诉它无限循环而没有延迟。例如,我的飘云图像是 1456 px 宽并且重复 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/

【讨论】:

【参考方案3】:

有一些他们称之为“图像拼接”的解决方案,人们为此制作了插件。

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

这个也适用于移动设备。 http://spritespin.ginie.eu/examples.html

【讨论】:

【参考方案4】:

你可以玩背景位置和jquery动画功能,看例子:

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

在完成事件中获取一个无限的背景并从 0 到背景宽度设置背景位置为 0 并再次触发动画。

【讨论】:

【参考方案5】:

如果您只针对 webkit-browsers,您可以单独使用 CSS3 完成此操作。 CSS3 内置了对动画的支持。通过使用迭代计数属性指定“无限”,您的动画将永远持续下去,并且......您明白了;-)

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

【讨论】:

+1;那是有趣的东西。值得一提的是,这是 OP 想要的图像旋转示例:jsfiddle.net/k5Bug。 (它比画布方式旋转更平滑。) 但有一个非常明显的“跳跃”。我可以让它类似于@pimvdb 的解决方案吗?【参考方案6】:

您可以使用CSS animations 来实现这种“环视”效果——非常适合视差!

您可以设置一个背景并为其background-position 设置动画,而不是添加多个图像并为其left 等设置动画:

#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 度全景的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 CSS3面试题

前端面试题--HTML5+CSS3

html5 css3 怎么制作简单的进度条

网页资源黄色大气主题html5 css3静态网页作业模版免费下载

HTML5,CSS3 与 Javascript 制作视频播放器

02_HTML5+CSS3详解第五天(实战篇之HTML5制作企业网站)