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>

Webのバナーをこの参考サイトのようにしたい

パラレルスタジオ

4

5 に答える 5

4

この多次元の背景画像を取得する最も簡単な方法は、バナーの背景 URL をパノラマ スタイルの画像に変更することです。もう 1 つの解決策は、フォーカスのある画像をパンする画像の代わりにビデオまたは gif を含めることです。

しかし、Parallel Studio のソース コードを見ると、WebGL という 3D グラフィック サービスを使用しているように見えます。ページの要素を調べると、メディア ファイルにフォールバック イメージがあることがわかります。この画像は、現在のブラウザが WebGL をサポートしていない場合にレンダリングされます。

Parallel Studio の Web ページが実現している効果は、youtube の iframe API、Google アナリティクス Javascript、およびウィジェットの組み合わせによるものだと思います。

その美しいウェブサイト！思っているよりもずっと複雑です！

最後に、4d/5d イメージだけが必要な場合は、API とウィジェットのすべてのクレイジーさをあまりいじりません。多次元バナーのみが必要な場合は、背景画像をよりパノラマに見えるものに変更してください。同じ画像を保持したい場合に、画像をよりパノラマに見せるための JQuery プラグインがたくさんあります。

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

于 2016-06-28T13:50:31.613 に答える
2

指定された Web サイトは、WebGL、YouTube API など、@Connor が言うように、多くのものを使用しています。. WebサイトでもThree.jsを完全に使用しているため、Three.js

を使用して同じことを実装できると思います。ファイルで確認できます。bundle.js

これらのチュートリアルも参照してください。Three.js を使用したPanorama Viewer と three.jsを 使用したPhoto Sphere が非常に便利であることがわかりました。

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 
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 に答える
0

@Bhansa と @user2362008 に同意します。プラグインと一緒にパノラマ画像を使用する必要があります。

このリンクを参照してください: https://pannellum.org/これとパノラマ画像を使用すると、Web サイトに表示されているものと同様の効果を作成できるはずです。

https://pannellum.org/documentation/overview/tutorial/に画像を挿入し、ページの下部にある埋め込みコードをコピーして、Web サイトで使用するだけです。

これを使用する方法の簡単な例を次に示します。

<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 に答える