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

Question

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

 <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

Answer 1

获取此多维背景图像的最简单方法是将横幅背景 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/

Answer 2

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

参见此 Link：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 在他的 link 中指出的框架之一。祝你好运。

Answer 3

给定的网站使用了很多东西，比如 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://whosebug.com/posts/38093397/edit#

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

Answer 4

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

Answer 5

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

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

How to add & show 4d image in web site with css

html

css

animation

360-degrees

360-panorama