Geek Answers Handbook

How to add and show 4d image on css website

all. I am working on my site. I made a banner for a moving image, my problem is that I want to show a 4d or 5d image for my animation banner. OPZET India is my weight. my fragment is here.

 <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>
Run codeHide result

I want to create my web banner like this link site

Parallel studio

+4
source share
5 answers

- , WebGL, API- YouTube , @Connor , , !.

, , Three.js, , bundle.js .

. Three.js Photo Sphere .js.

Codepen:
Css Sphere Panorama
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#
Hide result

, , 4,29 , .

+2

- . gif , .

, Parallel Studio, , - 3D- WebGL. , . , WebGL.

, - Parallel Studio API- youtube iframe, Javascript Google Analytics.

! , !

, 4d/5d, API . , , . JQuery, , :

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

+4

@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>
Hide result

, , , .

CSS3 - , Panellum, , , . .

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

    
    
    @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>
Hide result

https://jsfiddle.net/Ln9pd54k/

-1

More articles:


All Articles