如何使用 css 在网站中添加和显示 4d 图像答案

【问题标题】：How to add & show 4d image in web site with css如何使用 css 在网站中添加和显示 4d 图像
【发布时间】：2016-10-21 16:03:07
【问题描述】：

全部。我在我的网站上工作。我制作了一个动态图像横幅，我的问题是，我想为我的动画横幅显示 4d 或 5d 图像。 OPZET India 是我的网站。我的sn-p在这里。

 <head>
    	<style type="text/css">
.banner{
  position:absolute;
   background:url(http://previews.123rf.com/images/iimages/iimages1206/iimages120600296/13935384-Illustration-of-empty-yard-and-school-Stock-Vector-road-school-cartoon.jpg);
  -webkit-animation:100s scroll infinite linear;
  -moz-animation:100s scroll infinite linear;
  -o-animation:100s scroll infinite linear;
  -ms-animation:100s scroll infinite linear;
  animation:100s scroll infinite linear;
  top:0;
  left:0;
  width:100%;
 height:100%;
  text-align:center;
}    	

@-webkit-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@-moz-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@-o-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@-ms-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}
    	</style>
    </head>
    
    <body>
    	<div class="banner">
          <h1>OPZET India</h1>
            </div>
    </body>

我想让我的网络横幅像这个参考网站一样

Parallel Studio

【问题讨论】：

我在 Parallel Studio 链接下看到的只是静态图像。这个：pic.cx/img9/fmkyxospjnntzczzgdrb.jpg
已编辑，链接发错了。对不起人:)
这是他们使用的图片：parallel-studio.com/media/assets/images/hd/360-studio.jpg

标签： html css animation 360-degrees 360-panorama

【解决方案1】：

    
    
    @keyframes animatedBackground {
    	0% { background-position: 0 0; }
    	100% { background-position: -300px 0; }
    }
    @-moz-keyframes animatedBackground {
    	0% { background-position: 0 0; }
    	100% { background-position: -300px 0; }
    }
    @-webkit-keyframes animatedBackground {
    	0% { background-position: 0 0; }
    	100% { background-position: -300px 0; }
    }
    @-ms-keyframes animatedBackground {
    	0% { background-position: 0 0; }
    	100% { background-position: -300px 0; }
    }
    @-o-keyframes animatedBackground {
    	0% { background-position: 0 0; }
    	100% { background-position: -300px 0; }
    }
    
    #animate-area { 
    	width: 100%; 
    	height: 190px; 
    	background-image: url(http://davidwalsh.name/demo/bg-clouds.png);
    	background-position: 0px 0px;
    
    	animation: animatedBackground 10s linear infinite;
    	-moz-animation: animatedBackground 10s linear infinite;
    	-webkit-animation: animatedBackground 10s linear infinite;
    	-ms-animation: animatedBackground 10s linear infinite;
    	-o-animation: animatedBackground 10s linear infinite;
    }

    &lt;div id="animate-area"&gt;&lt;/div&gt;

https://jsfiddle.net/Ln9pd54k/

【讨论】：

【解决方案2】：

给出的网站使用了很多东西，比如 WebGL、youtube API 等等，正如 @Connor 所说，它比人们想象的要复杂得多！ .

我认为您可以使用Three.js 实现相同的功能，因为网站也完全使用它，您可以在bundle.js 文件中看到它。

还浏览了这些教程，我发现它们非常有用Panorama Viewer with Three.js 和 Photo Sphere with three.js .

有用的 Codepen 链接：
Css Sphere Panorama
Photo Sphere javascript

您可能必须为全景图使用不止一张图像。

希望对您有所帮助。

var PSV = new PhotoSphereViewer({
    panorama: 'https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/example/Bryce-Canyon-National-Park-Mark-Doliner.jpg',
    container: 'photosphere',
    loading_img: 'https://raw.githubusercontent.com/mistic100/Photo-Sphere-Viewer/3.1.0/example/photosphere-logo.gif',
    navbar: 'autorotate zoom download fullscreen',
    caption: 'Bryce Canyon National Park <b>&copy; Mark Doliner</b>',
    default_fov: 65,
    mousewheel: false,
    size: {
      height: 400
    }
  });

#photosphere {
  height: 100%;
  width: 540px;
  margin: 0 auto;
}

<link href="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r70/three.min.js"></script>
<script src="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.js"></script>
<div id="photosphere"></div>http://stackoverflow.com/posts/38093397/edit#

等待图片加载，因为它是 4.29MB，所以需要一些时间。

【讨论】：

感谢您的回答，我正在尝试。我认为这会奏效。
您帮了我很多，而且非常好，但是您过去的回答非常有效。非常感谢。
:-) 乐于助人！
我仍然想在 body 标签中使用它，而不是在 div 标签中。你能探索一下吗？
当然，我会看看我能做什么。 chat.stackoverflow.com/rooms/116051/…

【解决方案3】：

Try this code

.banner{
  position:absolute;
   background:url(image-url);
  -webkit-animation:100s scroll infinite linear;
  -moz-animation:100s scroll infinite linear;
  -o-animation:100s scroll infinite linear;
  -ms-animation:100s scroll infinite linear;
  animation:100s scroll infinite linear;
  top:0;`enter code here
  left:0;
  width:100%;
  height:100%;
  text-align:center;
}

【讨论】：

或使用此链接bradsknutson.com/blog/css-background-animation

【解决方案4】：

我同意@Bhansa 和@user2362008，您应该使用全景图像和插件。

查看此链接：https://pannellum.org/ 使用此链接和全景图像，您应该能够制作出类似于您网站中显示的效果。

您只需在此处插入图片：https://pannellum.org/documentation/overview/tutorial/ 并复制页面底部的嵌入代码即可在您的网站中使用。

这里有一个简单的例子说明如何使用它：

&lt;iframe width="600" height="400" allowfullscreen style="border-style:none;" src="http://cdn.pannellum.org/2.2/pannellum.htm?panorama=http%3A//i.imgur.com/jsi7RH4.jpg&amp;autoLoad=true"&gt;&lt;/iframe&gt;

希望这会有所帮助，我没有广泛使用该插件，所以我对插件了解不多。

使用 CSS3 不是最简单的方法，也不是最有效的方法，因此我建议使用上面概述的 Panellum，或者使用 Colin 在他的链接中指出的框架之一。祝你好运。

【讨论】：

演示似乎在我这边工作，你是如何使用它的？
我只是按照它的说明制作了一个滚动图像
这不是您想要的吗？就像网站上一样的 3d 全景视图，对吗？还是我误解了你想要什么？

【解决方案5】：

获取此多维背景图像的最简单方法是将横幅的背景网址更改为全景样式图像。另一种解决方案是包含视频或 gif，而不是会平移焦点图像的图像。

但是，在查看 Parallel Studio 的源代码后，似乎该网站正在使用名为 WebGL 的 3D 图形服务。在检查页面元素时，您会在媒体文件中注意到存在后备图像。如果当前浏览器不支持 WebGL，将呈现此图像。

我认为 Parallel Studio 的网页正在实现的效果是由于 youtube 的 iframe API、Google Analytics Javascript 和小部件的组合。

这是一个漂亮的网站！它比人们想象的要复杂得多！

最后，如果您只想要 4d/5d 图像，我不会对 API 和小部件的所有疯狂之处进行过多处理。如果您只想要多维横幅，请将您的背景图片更改为看起来更全景的图片。如果您想保留相同的图像，有大量的 JQuery 插件可以让您的图像看起来更全景：

https://www.sitepoint.com/10-jquery-panorama-image-display-plugins/

【讨论】：

你就在这附近，但包括很多旁白，那些不符合这个问题的条件，WebGL 之一，你的最后一部分只是触及我的解决方案，但不完全。谢谢你的回答。
Ankit，我认为你应该使用背景图片。确实，该网站正在使用@Connor 包含的所有上述内容。所以最好的方法是使用全景图像并使用光标切换移动它。
不是单一的全景图像是我的解决方案，我已经尝试过了。我需要其中的 2 个
其实我在你之前给出的链接中得到了点，它是360球形背景视图，但我仍然不知道如何使用它
@ConnorMeeks - 链接中断，您应该编辑您的答案以至少列出给定站点链接中提到的 jquery 插件的名称