Как добавить и показать 4d изображение на веб-сайте с помощью CSS

Все. Я работаю над своим сайтом. Я сделал баннер с движущимся изображением, моя проблема в том, что я хочу показать 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>

Я хочу сделать баннер моего веб-сайта похожим на этот ссылочный сайт

Параллельная студия

Источник

5 ответов

Решение

Данный веб-сайт использует много вещей, таких как WebGL, YouTube API и многое другое, как говорит @Connor. Это намного более сложно, чем можно подумать!,

Я думаю, что вы можете реализовать то же самое с помощью Three.js, так как веб-сайт также использует его полностью, вы можете увидеть это в bundle.js файл.

Также ознакомьтесь с этими уроками. Я нашел их очень полезными Panorama Viewer с Three.js и Photo Sphere с three.js.

Полезные ссылки на Codepen:
Css Сфера Панорама
Фото сфера 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://stackru.com/posts/38093397/edit#

Подождите, пока изображение загрузится, так как оно имеет размер 4,29 МБ, поэтому это займет время.

Источник

Самый простой способ получить это многомерное фоновое изображение - это изменить URL-адрес фона баннера на панорамное изображение стиля. Другое решение будет включать видео или GIF вместо изображения, которое будет панорамировать изображение в фокусе.

Однако, глядя на исходный код Parallel Studio, кажется, что веб-сайт использует сервис 3D-графики под названием WebGL. При просмотре элементов страницы вы заметите в медиа-файлах, что есть запасное изображение. Это изображение будет отображаться, если текущий браузер не поддерживает WebGL.

Я предполагаю, что эффект веб-страницы Parallel Studio достигается за счет комбинации iframe API youtube, Google Analytics Javascript и виджетов.

Это красивый сайт! Это намного сложнее, чем можно подумать!

Наконец, если вы просто хотите изображение 4d/5d, я бы не стал слишком много возиться со всем безумием API и виджетов. Если вам нужен ТОЛЬКО многомерный баннер, измените фоновое изображение на более панорамное. Существует множество плагинов JQuery, чтобы сделать ваше изображение более панорамным, если вы хотите сохранить одно и то же изображение:

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

Источник 
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;
}
Источник

Я согласен с @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, как описано выше, либо использовать одну из платформ, на которую Колин указал в своей ссылке. Удачи.

Источник 

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

Источник
Другие вопросы по тегам