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.
Related
I have three background images that I want to animate between. I do this as outlined below.
However, I find that sometimes (when first loading the page), the images flicker. So instead of a smooth transition what happens is that image 1 flickers then smoothly fades out, then image 2 flickers and then smoothly transitions in.
How can I avoid this flickering? Is there a way to wait for the images to be fully loaded before to start the animation? Or is that not the problem?
.page-light {
background-repeat: no-repeat;
background-position: center top;
}
#media (max-width: 767.98px) {
.page-light {
background-image: url('/img/hero/front-introduction-mobile.png');
}
}
#media (min-width: 768.00px) {
.page-light {
background-image: url('/img/hero/front-introduction-1.png');
-webkit-animation: animation-home-background 9000ms infinite;
-moz-animation: animation-home-background 9000ms infinite;
-o-animation: animation-home-background 9000ms infinite;
animation: animation-home-background 9000ms infinite;
-webkit-animation-delay: 1s;
/* Chrome, Safari, Opera */
animation-delay: 3s;
}
}
#-webkit-keyframes animation-home-background {
0% {
background-image: url('/img/hero/front-introduction-1.png');
}
40% {
background-image: url('/img/hero/front-introduction-2.png');
}
80% {
background-image: url('/img/hero/front-introduction-3.png');
}
100% {
background-image: url('/img/hero/front-introduction-1.png');
}
}
#keyframes animation-home-background {
0% {
background-image: url('/img/hero/front-introduction-1.png');
}
33% {
background-image: url('/img/hero/front-introduction-2.png');
}
66% {
background-image: url('/img/hero/front-introduction-3.png');
}
100% {
background-image: url('/img/hero/front-introduction-1.png');
}
}
I found this to be extremely helpful, as pointed out by #vxpin in the comments.
https://stackoverflow.com/a/52358326/4262057
Basically you preload all the images as follows:
.stylename {
background-image:
url('http://www.BungalowSoftware.com/images/silver-background.jpg'),
url('http://www.BungalowSoftware.com/images/silver-background2.jpg');
}
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/
I am building a single page website and in a section of that site I have a CSS animation
.animation {
background-color: #54a3f7;
-webkit-animation: html 2s ease-in-out;
}
set with
#-webkit-keyframes html {
0% { width: 0%;}
100% { width: 100%; }
}
I have a working example here:
http://jsfiddle.net/RqH5H/
My problem is that this animation will (of course) start at window load, but I want it to start when the user clicks on the top menu and wants to see <section id="animations">
So when the user clicks on "Animation" it will scroll down to that section at start the animation
You will need Javascript to make this happen. You can add the class the points to CSS animation on click (or whatever interaction event you wish). I have put together a basic JSFiddle to demonstrate:
Note: jQuery is used.
http://jsfiddle.net/zensign/sg9ty/1/
$('#start-btn').click(function () {
$('#animate-me').addClass('animation');
});
what 'bout this one?
.animation {
height: 40px;
width: 100%;
}
.animation:hover {
background-color: #54a3f7;
-webkit-animation: animation 2s ease-in-out;
-moz-animation: animation 2s ease-in-out;
}
#-webkit-keyfram``es animation { 0% { width: 0%;} 100% { width: 100%; }}
#-mox-keyframes animation { 0% { width: 0%;} 100% { width: 100%; }}
replace this with ur jsfiddle html.
I have done a simple three image transition animation code. The code can be found here:
http://jsfiddle.net/harshithjv/AF3Jj/
This code works only on chrome and chromium browsers. It does not work on Apple's Safari browser also. Also it does not work on any other browsers(I tested on Firefox and IE9, not tried Opera).
I guess that I am missing something on animation shorthand property. Please help me out.
Edit:
I am updating with the code for some clarity, which I should have done in first place.
HTML Code:
<div class="animated_star"></div>
CSS3 Code:
#-moz-keyframes shining_star {
from {
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
to {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
#-webkit-keyframes shining_star {
from {
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
100% {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
#keyframes shining_star {
from{
background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
}
50% {
background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
}
to {
background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
}
}
.animated_star{
height: 16px;
width: 16px;
float: left;
-webkit-animation: shining_star 1s infinite; /* works only for Chrome/Chromium */
-moz-animation: shining_star 1s infinite;
animation: shining_star 1s infinite;
}
Background image isn't a property that can be animated - you can't tween the property.
Instead, try laying out all the images on top of each other using position:absolute, then animate the opacity of all of them to 0 except the one you want repeatedly.
also
It works in Chrome 19!
So at some point in the future, keyframes could really be... frames!
You are living in the future ;)
After some research on this, I figured that background-image CSS property is not supported inside keyframes in most browsers. It must be because of loading too many images dynamically can lead to performance issues if larger images are loaded.
Thanks to #Morpheus for another stackoverflow link(http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations), through which I decided to resolve the issue through image sprites and reposition(using CSS property - background-position) within that sprite to select the image as I want it. The problem with background-position CSS property is that when it applied for CSS animation through keyframes, the reposition shows the movement within image sprite. But I wanted to show 3 stars transition quickly without movement in three frames. To make that possible, I had to use 6 keyframes where first star's position will be set in 0% and 33%, second star's position will be set in 34% and 66% and the third star will be set in 67% and 100%.
I have created a jsFiddle which does not have image sprites of same stars. I could not locate sprite for same stars online and so I used alternate stars. Its not a perfect example since it has sloppy animation, but I have created a smaller sprite image (48px x 16px) on my system, and animation looks good enough.
HTML Code:
<div class="animated_star"></div>
CSS Code:
#-moz-keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
#-webkit-keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
#keyframes shining_star {
0% { background-position: -135px 0px; }
33% { background-position: -135px 0px; }
34% { background-position: -135px -260px; }
66% { background-position: -135px -260px; }
67% { background-position: -270px -260px; }
100% { background-position: -270px -260px; }
}
.animated_star{
height: 130px;
width: 135px;
float: left;
background: transparent url('http://azmind.com/wp-content/uploads/2011/11/social-star-icons.png') no-repeat fixed;
background-position: 0px -390px;
-webkit-animation: shining_star .5s infinite linear;
-moz-animation: shining_star .5s infinite linear;
animation: shining_star .5s infinite linear;
}
The jsFiddle link: http://jsfiddle.net/harshithjv/7QvSP/2/
Example (you can modify and test): http://codepen.io/g-liu/pen/XbrMzr?editors=110
I've modified the code to work in Firefox, but the second animation seems to be skipping frames.
frames: http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png
html:
<div id="guy-1" class="guy"></div>
<div id="guy-2" class="guy"></div>
Original sprite
css:
.guy {
height: 294px;
width: 165px;
display: inline-block;
background-image: url(http://www.fabiobiondi.com/blog/wp-content/uploads/2012/08/runningGrant.png);
}
#guy-1 {
animation: run-x 0.4s infinite steps(12);
}
#guy-2 {
animation: run-x 0.4s infinite steps(12), run-y 2.4s infinite steps(6);
}
#keyframes run-x {
from {
background-position: 0 0;
}
to {
background-position: -1980px 0;
}
}
#keyframes run-y {
from {
background-position: 0 0;
}
to {
background-position: 0 -1764px;
}
}
I've solved my problem using LESS (http://lesscss.org/)
It maked the css of animation in a generic way that worked in all browsers (even in mobile).