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静态网页作业模版免费下载