Day and Night: Creating a Scenery Animation with jQuery and CSS

In today’s tutorial I am going to show you, how to create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements with images.

See the demo link below and check out the result. The animation takes around 30 seconds, so sit back and enjoy it!

Please note that this will NOT work in any IE version. Not because it is not possible, I simply did not have the time and energy for that. I was trying to fix it at least for IE 8 but you know, when coding starts to get ugly because of “fixing” it for IE, I sometimes loose my patience. Today was one of these days (I bet you all have them) where you say: Darwin, I Ching … IE has to die out (and not only IE6), no, the whole line!

Ok, let’s start with the coding.

1. The HTML

The HTML consists of the divs that will have the scenery as background images. So, we will have the sky, the sun, the clouds, the landscape, the moon and the stars. We will also have an element for the night and a shooting star:

<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>

The color change of the setting sun is simulated by the fading in of another red sun, while the yellow sun fades out.

But before we get into the animation details, let’s take a look at the CSS.

2. The CSS

The CSS is very similar for all of the elements, since most of them will be stretched over the screen. All of them have absolute positioning:

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}

When having common attributes, we can specify them for all the classes divided by commas.

#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}

The sky is composed of a semi-transparent images with a gradient from blue to white. This will give a nice effect to the sky.

#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}

In the beginning of the animation, when it is daytime, we want to show a yellow sun. The sun will set, i.e. move down, and fade out slowly. At the same time, we will fade in the red sun, that will be moving the same way. So, initially, we set the position to somewhere in the center of the screen. Then, we will animate the movement and the fade out/in effects.

#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}

The clouds and the landscape will be repeated because we want users with a bigger screen to see a complete scenery as well. Try to zoom in/out in your browser and you will see that the screen is always filled with the images. Since we set the overflow of the body to be hidden, the user will never have to scroll – he simply won’t see anything that goes beyond the browser edges.

#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}

The night will simply be a div stretched over all the screen with a background color of black. We will make it appear slowly by setting its opacity higher, hence making it less transparent.

#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}

The shooting star will be a special element: the image is a simple inclined white line. We will make it appear like a shooting star by moving its background position and fading it out. Because of that, we need to set the initial background position to 80px horizontally (xpos) and -200px vertically (ypos). So basically, we want to place it in the outer top right corner and then make it appear in the “visible area”.

#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

With the increasing z-indexes, we define which element will be on top of the other. Of course, if we list them in the HTML accordingly, we will have the same effect, but it is always better to make sure of it in the CSS. To all the elements that we don’t want to show from the beginning on, we give an opacity value of 0, hence making them transparent.

And that’s the CSS part. Now, let’s look at the magical JavaScript.

3. The JavaScript

In order to animate the background color of the sky, we will use a jQuery plugin which can be found here.  Simply include it after you include the main jQuery script.

Let’s first take a look at the whole JavaScript that we will define:

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

In line 2 and 12 to 16 we define what shall happen at the same time. The last integer stands for the milliseconds, the duration of the effect. The yellow sun shall take 12 seconds to move down and to become more transparent, while at the same time, the red sun becomes more opaque (but it moves down, too).

The sky (line 13) shall take 18 seconds to change its background color from white (like we defined in the CSS) to a dark purple.

The clouds (line 14) will appear to be moving because we define an animated change of the background position which takes 30 seconds. We also state that they shall become transparent in the end (so that we have a clear night sky).

Since we want the whole scenery to get darker, we make the night fall by increasing the opacity of the black div.

Now, let’s see what happens in the functions that should start after the sun has set (line 3 to 10).
First, we want the stars to slowly “fade in” by setting the opacity higher. After that has happened, we want the moon to appear from bottom to the center by fading in. Then, the shooting star shall appear. This we simulate by changing it’s background position to 0px 0px and moving it down a little bit. Additionally, to make it a real shooting star, we make it disappear very quickly 🙂 by setting the opacity to 0.

And that’s it! I hope you enjoyed it!