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
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/
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>© 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.
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.
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;
}
#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/
Related
I am new to programming. Please forgive me if this is a very basic question.
I am working on a small project of designing a very simple personal website using HTML and CSS. On the website, I want the background colors of the main website to fade into one another after some time (say, to transition from light blue to light green to light yellow after 15s each). Is there a way I can do this using CSS?
body {
background:lightblue;
animation:changebg infinite 15s;
}
#keyframes changebg{
0% {background:lightblue;}
33% {background:lightgreen;}
66% {background:lightyellow;}
100% {background:lightblue;}
}
Do this instead
body{
background: lightblue;
animation: changebg 60s linear infinite alternate;
}
#keyframes changebg{
0% {background:lightblue;}
33% {background:lightgreen;}
66% {background:lightyellow;}
100% {background:lightblue;}
}
If this doesn't work, you can mess around with the timing.
You can try the following code:
body{
background: lightblue;
animation: changebg 60s linear infinite alternate;
}
#keyframes changebg {
0% { background:lightblue; }
33% { background:lightgreen; }
66% { background:lightyellow; }
100% { background:lightblue; }
}
Pretty much the website's background will start at light blue, and when it reaches 33% of 60s (for e.g.) it will change to light green, etc.
And when it reaches 100% at 60s time, the "linear infinite alternate" will make sure it repeats.
body {
background: red;
animation: changebg 5s infinite;
//adding infinte will make your animation run in a loop
}
#keyframes changebg
/* Firefox */
{
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: red;
}
}
Just an addition to the previous answer
Keep on learning.
Good day,
I am trying to make a nice animation for a website.
It should be relatively simple. So I have drawn a hand and a BMW car key. Used a css code to make it swing and yes it works.
However it is responsive but not in the way I want it to be. I'd like the key to stay in place where it is. However it is moving just about anywhere depending on the screen size.
I could of course use screen size in css. But I don't want to use screen size. I want to be able to place the animation about anywhere where I'd like it to be.
However when resizing the key moves also anywhere where it would like to be :-/
Probably my approach is entirely wrong. But at this point this is what I'd could come up with. Maybe it is right. But I hope that someone could tell me where and how to correct my mistakes.
My HTML code (of course bootstrap and others are linked in the header)
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg)
}
100% {
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
.key_hand {
/*
background-image: url('arm_hand.png');
background-repeat: no-repeat;
background-size: 100%; */
min-height: 900px;
}
.key_hand>.complete_arm {
position: relative;
width: 100%;
z-index: 2;
}
.key_hand>.bmw_key {
position: relative;
display: inline-block;
top: -390pt;
left: 7%;
z-index: 1;
width: 10%;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
<div class="container">
<div class="row">
<div class="col-md-12 key_hand">
<img src="arm_hand.png" class="complete_arm" />
<img src="complete_bmw_key.png" class="bmw_key" />
</div>
</div>
</div>
I have created the following pen. Hoping to shed some light on this case.
https://codepen.io/slalex/pen/GXxMmg
Removing min-height: 900px from .key_hand, and replacing pt by % for the top positioning of .key_hand > .bmw_key, it should be great. Here is the result
Hope it look like what you were waiting for, and bravo for your drawing !
I found this code at http://freshinbox.com/blog/ambient-animations-in-email-snow-and-stars/ and liked the effect. Though when I put it into my email it creates a huge white space between the tables.
How do I insert this into an email correctly? Do I need to place the div tags in a certain place?
<style>
#media screen and (-webkit-min-device-pixel-ratio: 0) {
.animcontainer{
position:relative;
width:100%;
height:200px;
overflow:hidden;
background-color:#007FFF;
}
.snow{
border-radius:9px;
height:18px;
width:18px;
position:absolute;
top:-20px;
background-color:#ffffff;
}
.snow1{
-webkit-animation: snowanim1 5s linear 0s infinite;
}
.snow2{
-webkit-animation: snowanim2 6s linear 1s infinite;
}
.snow3{
-webkit-animation: snowanim3 7s linear 2s infinite;
}
#-webkit-keyframes snowanim1
{
0% { top:0%;left:50%; }
100% { top:100%;left:65%; }
}
#-webkit-keyframes snowanim2
{
0% { top:0%;left:30%; }
100% { top:100%;left:25%; }
}
#-webkit-keyframes snowanim3
{
0% { top:0%;left:70%; }
100% { top:100%;left:60%; }
}
}
</style>
.
<div class="animcontainer">
<div class="snow snow1"></div>
<div class="snow snow2"></div>
<div class="snow snow3"></div>
</div>
I figured it out in the end, it makes no difference where the div tags are. What was causing the issues was the animcontainer.
There is one issue I could not solve however and that was the animation not reaching the bottom of the page despite being "top:100%" within the animation, so I had to do 2000% to actually reach the bottom which does not look like an elegant solution.
I am developing an Ionic application where one of the templates contains sprite animation. The animation works fine except that the size is fixed for any device I use. Here's the code I use:
CSS
#animation_boy {
width: 558px;
height: 1536px;
background-image: url("../img/boy_sprite.png");
-webkit-animation: play 1.2s steps(7) infinite;
animation: play 1.1s steps(7) infinite;
}
#-webkit-keyframes play {
from {
background-position: 0px
}
to {
background-position: -3906px
}
}
#keyframes play {
from {
background-position: 0px
}
to {
background-position: -3906px
}
}
HTML
<div id="animation_boy"></div>
I want to make the size depend on the screen. Thanks for the help.
[Edit: Solution was to create two containers, with the second animation container set to left: 100%.]
I have a very basic animation to move a large gif across the page, the gif is 1536px wide.
The page can be infinitely wide and thus the animation starts at right:0px and ends at right:100%. In reality, I don't expect the page to ever be larger than the highest monitor resolutions used currently.
In order to create the feeling that the animation was occurring infinitely I have created a second animation and started this at right:-1536px and ending at right:100%.
Unfortunately, as this second animation is covering a greater distance it is moving faster than the first and my attempted seamless animation doesn't work. Is there a way to specify that animation-duration work at a constant 1px per second or something equivalent instead of a duration? I don't believe I can increase the duration to match as the browser could be any size.
Any help or ideas appreciated!
My code is as follows:
#-webkit-keyframes frontrocks-anim2 {
0%{right:-1536px;}
100%{right:100%;}
}
#-moz-keyframes frontrocks-anim2 {
0%{right:-1536px;}
100%{right:100%;}
}
.frontrocks-anim2 {
-webkit-animation:frontrocks-anim2 30s infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-delay: 0s;
-moz-animation:frontrocks-anim2 30s infinite;
-moz-animation-timing-function:linear;
-moz-animation-delay: 0s;
}
UPDATE
A better solution is to adapt Oriol's comment from https://stackoverflow.com/a/21088405/603369
That provides a smoothly scrolling background, so all that is left is to animate the background element to "fly in" upon page load.
The problem is that the initial "fly-in" must be based on the width of the container (e.g., the page), while the repeating background must be based on the width of the background image. That leads to some oddities in timing, where the initial "fly-in" from the right side may be significantly faster or slower than the background animation. You might be able to adapt this solution further by using JavaScript to adjust the timing based on the width of the page, but this should give you a starting point.
header {
position: relative;
overflow-x: hidden;
width: 100%;
height: 52px;
border: 1px solid #ccc;
}
.bg {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: -1536px;
background: url(https://placehold.it/1536x50/cceecc) 0% 0% repeat;
z-index: -1;
-webkit-animation-name: slide-in, bg-anim-repeat;
-webkit-animation-duration: 5s, 5s;
-webkit-animation-timing-function: linear, linear;
-webkit-animation-iteration-count: 1, infinite;
-webkit-animation-delay: 0s, 5s;
}
#-webkit-keyframes bg-anim-repeat {
0% {-webkit-transform: translateX(0);}
100% {-webkit-transform: translateX(-1536px);}
}
#-webkit-keyframes slide-in {
0% {left: 100%;}
100% {left: 0;}
}
<header>
<div class="bg"></div>
</header>
Original
If the page is larger than 1536x2, you're going to have an odd visual look as the two gifs march across the screen. But if this is what you want to go with, try delaying the beginning of the second animation until halfway through the first animation.
Demo of the second option is below
header {
position: relative;
overflow-x: hidden;
width: 100%;
height: 52px;
border: 1px solid #ccc;
}
header img {
position: absolute;
left: 100%;
}
#-webkit-keyframes frontrocks-anim {
0%{left:100%;}
100%{left:-1536px;}
}
#image1, #image2 {
-webkit-animation:frontrocks-anim 10s infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-delay: 0s;
-moz-animation:frontrocks-anim 10s infinite;
-moz-animation-timing-function:linear;
-moz-animation-delay: 0s;
}
/* Delay is 1/2 of the total animation time */
#image2 {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
<header>
<img src="https://placehold.it/1536x50/cceecc" alt="moving image 1" id="image1">
<img src="https://placehold.it/1536x50/eecccc" alt="moving image 1" id="image2">
</header>