Ikke kategoriseret

Dead Artists



Vandelio hipster banner



















How to make a transitioning background-image with css keyframes

First of all, when i said animate, its should be understandet as just a simple transition which changes the image to another image.
In my example i chose the create images based on one single image, and then manipulated the images so that the transition would make it look like a simple animation or clip.

With that out of the way, let me just quickly setup the scene for what was trying to achieve with this nonsens.

My main objective was to create an illusion, of what looked an animation, video clip or just a gif. But it should be loaded super fast and be the first thing visible on the screen.
The animation was not gonna be very complex, just some slight changes in the sky above the valley, creating an illusion that the sky was moving a bit in the image. Im just talking 5-6 frames with a simple fade transition

 

I scratched down the possible options i had from the top of my mind.

  • Find some crazy slider plugin that would solve all problems in the world. .. naah dont think so.
  • Create a Gif.
  • Create a video clip and setup a html5 video player with a thumbnail poster.
  • Create this single frames needed and shift them in the container with javascript
  • Create this single frames needed and use css @-keyframes and @-webkit-keyframes to transition the images


The .gif

The problem with .gif is the output which simply do not live up to my expectations, regarding the quality of the final image. Since it was a high-res image that was suppose to be used on a landingpage as an eye catcher. I scratched that one quickly.


Video clip .mp4 .webm ..
This is certainly the most simple solution to do in practice, it just seems a bit to much for just showing 5-6 frames. With 24fs, it would not be more then just 200 milliseconds, which is way to fast for anyone to get exited by the manipulation. So we have to create a frame a by frame transition on each, to stretch the clip out, to about 5 or maybe even 10 sec. I suddenly seemed like alot of work just to get that simple effect i was looking for. Anyway if  this solution was meant to be used,
the final steps would be just to create a sequence of the images with the transition made in between each frame and export the entire thing as a movie in .mp4 , .webm etc. using your favourite video processing tools. Like Adobe Premiere Pro.
Upload the movieclip to the server and use a standard html5 player to attach the clip with the desired attributes to hide controls and what have ya’.

Its not difficult at all, i just wanted to find an easier and more compact way to transition between a series of images.


Toggling images in div with javascript
For a sec i was thinking about just doing it like so, but i wanted to explore my options first.
This would also be a quite simple solution, by just setting an interval to switch the background image, with somekind of fadein fadeout function that overlaps each other.

Or just a set of divs representing all the frames needs, and then switching visibility on all but the one shown. again there would be someking of fadein on the top image, to create the illusion.


@-keyframes and @-webkit-keyframes
You gotta love keyframes, these awesome css features makes everything so much easier.,No need for counters or intervals No need for js at all (hmm maybe just a little bit anyway , more on that later )
It is just as simple as manipulating the frames in a video editing tool. Just set the steps of css required the make the animation. Boom. Shit just got unreal!

In the code example i will not be focusing on cross browser comp.

but you can pretty much just add the -webkit- in front of the style and @keyframes  –

Remember to handle old browsers in a pretty fashion, like setting a fallback image.


Javascript
I didn’t promise this was a clean css solution., so heres a little bit to make it cleaner.
In my experience i found that for this to be super smooth, one need to pre-load the images, so they are ready in the DOM when they are needed.
Otherwise there will be a lacktime of loading depending on the client connection speed.

Check the last code bit with javascript

 

EDIT:

Im no longer using this feature anywhere, so this is pretty much just to remember it., if anyone finds this useful, then just throw me an quick email, to let me know.

 

 


How to make a transitioning background-image with css keyframes


<style>
@keyframes backgroundImageChanger {
0% {
background-image: url('../images/svImages/big_mountain_solid_foundation_1.jpg');
}
20% {
background-image: url('../images/svImages/big_mountain_solid_foundation_2.jpg');
}
40% {
background-image: url('../images/svImages/big_mountain_solid_foundation_3.jpg');
}
60% {
background-image: url('../images/svImages/big_mountain_solid_foundation_4.jpg');
}
80% {
background-image: url('../images/svImages/big_mountain_solid_foundation_5.jpg');
}
100% {
background-image: url('../images/svImages/big_mountain_solid_foundation_6.jpg');
}
}
#image{
background-image: url('../images/svImages/big_mountain_solid_foundation_1.jpg');
animation-name: backgroundImageChanger;
animation-duration: 10s;
animation-iteration-count:infinite;
animation-direction: alternate;
animation-timing-function: linear;  
}
</style>
<!-- HTML -->
<div id="image">
<!-- i am gonna contain a image which will transition into another and another and another forever -->
</div>
<script>
// preload images for transition - // Image sequence named as : name_1 name_2 name_3 name_4 name_5 etc.
var imageArray = new Array();
var imageLocation = 'images/svImages/';
var imageNameWithoutNumberExtension = 'big_mountain_solid_foundation_'; 
var imageFormat = 'jpg';
var numberOfImages = 6;
window.onload = function(){
for(i = 1; i <= numberOfImages; ++i){ var image = new Image(); image.src = imageLocation + imageNameWithoutNumberExtension + Number(i) + "."+imageFormat; imageArray[i] = image;}
}
</script>


Coffess

3796

Pieces of cake

1897

Km on bikecycle

2847

Developed with love by

VANDELIO