September 17, 2014 11:32 pm

How to Create Animated CSS3 background

In this tutorial we will present animated website background with CSS 3.0 and JavaScript. In the beginning we will take a look on some great CSS 3 features which makes possible to build interactive, dynamic, and awesome looking web site contents. Animation is one of the greatest features in CSS 3, so we are now able to build web sites more constructive and more acceptable for users without large Flash .swf objects which use so much system and Internet resources while loading and executing.

Create Animated CSS3 background

[wpdm_file id=114]DEMO

We are able to make such websites without JavaScript support too (in this tutorial we will use JavaScript only for checking system time of user’s computer, to change the site’s behave depending on current time of day).

In this tutorial we will explain how to use CSS animation property to make awesome, well looking animated web site background. We thought a while what should we present, and we got the idea to make some kind of “sky with floating clouds” background.

Let’s take a look on animation property syntax. Animations syntax is not the same for every browser, on some of them we must use some prefixes. So for the Google Chrome we will put -webkit- prefix on the beginning of the line, for Mozilla Firefox we will put -moz-, for Opera that will be -o- and for Internet Explorer we don’t have any prefixes, expect some older versions where we will use -ms-.

Example:

-webkit-animation-name: animsec;

Every animation in CSS 3 must be linked with some keyframes block. Keyframes block has the name and the starting and ending points of animation. In the above the name of keyframes block is animsec. There should be browsers prefixes like we explained early.

Example:

@-webkit-keyframes animfrst
{   
from { background-position: -500px 50%;}
to { background-position: calc(100% + 500px) 50%;}
}

This means that our animated object will have background with starting position of x coordinate at -500px and the position of y coordinate at 50% (middle of the page). After the execution of the animation, the position of animated object will be calculated by the width of the page plus 500px on x coordinate (on this way we will have a feel like the clouds floating out of the page, and new clouds appearing on the opposite). The end point of animated object will be at the middle of the page on y coordinate (50 %). We using 500px in calculations because the background width of the object is 500 px.

Time for hard work

In our project we have images for the objects backgrounds(clouds, blue sky, stars, Sun, and the Moon), one HTML file for displaying our work, CSS file where we put stuffs that we explained above, and JS file where we have the function for checking the system time.

Source of index.html page:

<html>
<head>
    <link rel="stylesheet" href="css/css.css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/js.js"></script>
    <script>
   $(document).ready(function(){ change(); });  
    </script>
    </head>
<body>
    <div id="object"></div>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</body> 
</html>

As you can see from the source of HTML page, we have four div tags. We using object tag for loading the Sun, or the Moon background (depends on current time of day). In rest three divs we loading the clouds with directions from the CSS file. We have three layers of the clouds with different directions and speeds.

JavaScript code on the page calling the function from .js file when document finishes loading.

Source of css.css file:

@-webkit-keyframes animfrst
{
   from { background-position: -500px 50%;}
   to { background-position: calc(100% + 500px) 50%;}
}
@-moz-keyframes animfrst
{
   from { background-position: -500px 50%;}
   to { background-position: calc(100% + 500px) 50%;}
}
@keyframes animfrst
{
from { background-position: -500px 50%;}
to { background-position: calc(100% + 500px) 50%;}
}
@-o-keyframes animfrst
{
   from { background-position: -500px 50%;}
   to { background-position: calc(100% + 500px) 50%;}
}
@-webkit-keyframes animsec
{
   from { background-position: calc(100% + 685px) 50%;}
   to { background-position: -685px 50%;}
}
   
@-moz-keyframes animsec
{
   from { background-position: calc(100% + 685px) 50%;}
   to { background-position: -685px 50%;}
}
@keyframes animsec
{
   from { background-position: calc(100% + 685px) 50%;}
   to { background-position: -685px 50%;}
}
@-o-keyframes animsec
{
   from { background-position: calc(100% + 685px) 50%;}
   to { background-position: -685px 50%;}
}
@-webkit-keyframes animfour
{
   from { background-position: calc(100% + 1498px) 50%;}
   to { background-position: -1498px 50%;}
}
@-moz-keyframes animfour
{
   from { background-position: calc(100% + 1498px) 50%;}
   to { background-position: -1498px 50%;}
}
@keyframes animfour
{
   from { background-position: calc(100% + 1498px) 50%;}
   to { background-position: -1498px 50%;}
}

  
@-o-keyframes animfour
{
   from { background-position: calc(100% + 1498px) 50%;}
   to { background-position: -1498px 50%;}
}
body {
    height: 100%;
    background:url('../images/sky.jpg') no-repeat center center fixed;
    background-size: cover;
}
#object
{
   background: url(../images/sun.png);
   position: relative;
   background-size: contain;
   background-position: center;
   width:400px;
   height: 262px;
   margin: auto;
   top:20%;
   z-index: 1;
}
#first
{
   background: url(../images/cloud1.png);
   background-repeat: no-repeat;
   width:100%;
   height:100%;
   position: absolute;
   top:0;
   left:0px;
   z-index: 2;
	
	-webkit-animation-name: animsec;
	-webkit-animation-duration: 60s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: animsec;
	-moz-animation-duration: 60s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	
	animation-name: animsec;
	animation-duration: 60s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	
	-o-animation-name: animsec;
	-o-animation-duration: 60s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
}
#second
{
   background: url(../images/cloud2.png);
   background-repeat: no-repeat;
    	width:100%;
    	height:100%;
   	position: absolute;
    	top:0;
    	bottom: 0;
    	left:0px;
   	z-index: 3;
	
	-webkit-animation-name: animfrst;
	-webkit-animation-duration: 40s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: animfrst;
	-moz-animation-duration: 40s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
		
	animation-name: animfrst;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	
	-o-animation-name: animfrst;
	-o-animation-duration: 40s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
}
#third
{
   background: url(../images/cloud3.png), url(../images/cloud4.png);
   width:100%;
    	height:100%;
    	position: absolute;
    	top:0;
    	bottom: 0;
    	left:0px;
    	background-repeat: no-repeat;
   	z-index: 4;
	
	-webkit-animation-name: animfour;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: animfour;
	-moz-animation-duration: 100s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	
	animation-name: animfour;
	animation-duration: 100s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	
	-o-animation-name: animfour;
	-o-animation-duration: 100s;
	-o-animation-timing-function: linear;
	-o-animation-iteration-count: infinite;
}

The most important thing of this tutorial about CSS we already explained. So, we will explain some basic things of the CSS file. The div tags where we loading the backgrounds (clouds) must have dimensions like our page, that’s why we put width:100%; height:100%; lines in every div block. To enable floating behavior for our clouds, we must “detach” them from our page, so we used position:absolute lines. We have to order our divs on z coordinate, so they will be displayed on the page one after another, we used z-index lines to achieve this, bigger number for z-index will put the object on top of others.

We already explained the prefixes for different web browsers, so we will now put our attention on animation lines. With -o-animation-name: animfour; line we said to browser that animated object have behavior that we explained in the animfour keyframes block. -o-animation-duration: 100s; means that our animation will have duration 100 seconds. We using -o-animation-timing-function: linear; when we like to have linear timing function of our animation (same speed from the beginning to end), instead we can use: “ease“, “ease-in“, “ease-out“, “ease-in-out” … With -o-animation-iteration-count: infinite; line we secured that our animation will be infinite (animation will start over and over again).

One of the most important thing we like in the CSS 3 is the fact that we can use more than one background image for one object, in our CSS file we used background: url(../images/cloud3.png), url(../images/cloud4.png); line for that. And yes, the major thing is to make our backgrounds to not repeat, that’s why we used background-repeat: no-repeat; in CSS.

Source of js.js file:

function change()
{
time=new Date();
if (time.getHours()>=19 || time.getHours()<=6)
{
document.getElementById("object").style.backgroundImage="url(images/moon.png)";
document.body.style.backgroundColor="black";
document.body.style.backgroundImage="url(images/stars.png)";
    	document.body.style.backgroundRepeat="repeat";
}
else {
document.getElementById("object").style.backgroundImage="url(images/sun.png)";
    	document.body.style.backgroundColor="blue";
    	document.body.style.backgroundImage="url(images/sky.jpg)";
    	document.body.style.backgroundRepeat="no-repeat";
}
}
setInterval(change,36000);
[wpdm_file id=114]DEMO

We already mentioned that index page calling the function change when the page finishes loading. The function has one object variable time implemented by built in class Date(). We fetching the current system hour by calling the method getHour() from the class Date(). After that we checking the value of the current system hour, and depends on it we loading the different backgrounds in our website div elements (sun, moon, sky or stars). In example the hour limit is 19 (If the current hour is lower then 19, we will have the sun and the blue sky, in other cases we will have the stars and the moon).

Author Nermin Resovic

Nermin Resovic is an IT engineer - Master degree in software and web development. He is in PHP world since 2007. He loves web and desktop development and electronic engineering. In free time he likes to develop custom web solutions, desktop applications and electronic schemes.

Facebook, Skype :nermin.resovic3


Tutorial Categories:

One response to “How to Create Animated CSS3 background”

Leave a Reply

Your email address will not be published. Required fields are marked *