4

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

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

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

平行工作室

4

5 回答 5

4

获取此多维背景图像的最简单方法是将横幅的背景 url 更改为全景样式图像。另一种解决方案是包含一个视频或 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/

于 2016-06-28T13:50:31.613 回答
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，所以需要一些时间。

于 2016-06-29T07:47:13.220 回答
0

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

请参阅此链接：https ://pannellum.org/使用此和全景图像，您应该能够产生类似于您网站中显示的效果。

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

这是一个关于如何使用它的简单示例：

<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&autoLoad=true"></iframe>

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

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

于 2016-06-28T19:46:33.963 回答
0 
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;
}
于 2016-06-29T10:12:34.453 回答
-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;
    }
    <div id="animate-area"></div>

https://jsfiddle.net/Ln9pd54k/

于 2016-06-29T09:43:09.673 回答