4

all. I'm working on my website. I made a banner of moving image, my problem is that, I want to show a 4d or 5d image for my animating banner. OPZET India is my wesite. my snippet 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>

I want to make my web's banner like this reference site

Parallel Studio

Shadow
  • 244
  • 1
  • 3
  • 23

5 Answers5

4

The easiest way to obtain this multidimensional background image, would either be to change the banner's background url to a panoramic style image. Another solution would be to include a video or gif instead of the image that would pan over the image in focus.

However, after looking at the source code of Parallel Studio, it seems as if the website is using a 3D graphic service called WebGL. You will notice in the media files upon inspecting the elements of the page that there is a fallback image. This image will be rendered if the current browser does not support WebGL.

I assume that the affect Parallel Studio's Webpage is achieving is due to a combination of youtube's iframe API, Google Analytics Javascript, and widgets.

Its a beautiful website! It is alot more involved than one might think!

Finally, If you just want the 4d/5d image, I would not mess around too much with all the crazyness of the API and widgets. IF YOU ONLY want the multidimensional banner, change your background image to one that will seem more panoramic. There are tons of JQuery Plugins to make your image seem more panoramic if youd like to keep the same image:

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

Connor Meeks
  • 501
  • 1
  • 6
  • 19
  • You are just nearby about this, but included , a lot of side points, those are not eligible for this question, one of the WebGL and your last part is just touching my solution but not completely. well thanks for answer. – Shadow Jun 28 '16 at 15:34
  • 1
    Ankit, I think you should use a background image. It's true that the website is using all above things which @Connor has included. So the best way will be to use a panoramic image and toggle move it by using the cursor. – bhansa Jun 28 '16 at 18:13
  • Not a single, panoramic image is my solution, I have been tried it. I need 2 of that – Shadow Jun 29 '16 at 05:37
  • Actually I got the point in the Link that you given before, Its a 360 Spherical view of background, But still I didn't get how to use it – Shadow Jun 29 '16 at 05:40
  • @ConnorMeeks - links break, you should edit your answer to list at least the names of the jquery plugins mentioned in the given sitepoint link – Rachel Gallen Aug 04 '16 at 08:08
2

The website given is using a lot of things like WebGL, youtube API and much more as @Connor says It is alot more involved than one might think! .

I think you can implement the same using Three.js as the website is also using it completely, you can see it in bundle.js file.

Also go through these tutorials I found them very useful Panorama Viewer with Three.js and Photo Sphere with three.js .

Useful Codepen Links:
Css Sphere Panorama
Photo Sphere javascript

You may have to use more than one image for panorama.

Hope it Helped.

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#

Wait for the image to load as it is of 4.29MB so it will take time.

bhansa
  • 7,282
  • 3
  • 30
  • 55
  • Still I want use this with body tag, not in div tags. can you please explore it? – Shadow Jun 30 '16 at 07:37
  • Sure, I'll see what I can do. http://chat.stackoverflow.com/rooms/116051/room-for-bhansa-and-ankit-gupta – bhansa Jun 30 '16 at 07:46
0

I agree with @Bhansa and @user2362008, you should use a panoramic image along with a plugin.

See This Link: https://pannellum.org/ Using this and a panoramic image you should be able to make an effect similar to the one shown in your website.

You just need to plug in your images here: https://pannellum.org/documentation/overview/tutorial/ and copy the embed code at the bottom of the page to use it in your website.

Here is a simple Example on how to use it :

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

Hope this helps, I haven't used the plugin extensively so I don't know too much about the plugin in particular.

Using CSS3 isn't the simplest way, nor the most effective, therfore I suggest either using Panellum as outlined above, or use one of the frameworks Colin pointed to in his link. Good Luck.

The Dark Knight
  • 695
  • 4
  • 10
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;
}
user2362008
  • 51
  • 8
-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/

Shadow
  • 244
  • 1
  • 3
  • 23
user2362008
  • 51
  • 8