Animated Page Header

 Javascript  Add comments
Apr 022009
 

You’ve no doubt seen websites where the header image slowly moves, usually with a landscape or sky scene. Well, here’s how to make your own. Take a look here to see what you’ll be making.

HTML

The html for this example is basic to say the least. It’s just a #header div centred on the page with a fixed width and height.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="starfield.css" type="text/css" />
<script type="text/javascript" src="starfield.js"></script>
</head>
<body>
<div id="header">
<img id="title" src="images/title.png" />
</div>
</body>
</html>

The css is just as basic

starfield.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#header {
    margin:0 auto;
    width:1000px;
    height:200px;
    position:relative;
    background:#000;
}
#header img {
    position:absolute;
}
img#title {
    position:static;
    display:block;
    margin: 0 auto;
}

To create the starry sky, we’re going to use 3 different star images, varying in size and brightness and we’ll use Javascript to create multiple copies of each image. We start by creating an object literal:

var Backdrop = {
code here
};

Next we create 2 methods, init and animate.

var Backdrop = {
    init: function() {
    code here
    },
    animate: function() {
    code here
    }
};

The init method is going to be called when the page loads. This will set up our container and create the images and display them on the page.

It takes 4 parameters. The first one (container) is where we’ll pass the id of the div in which we want the action to take place. In our example, this will be ‘header’.
The second parameter (image) is where we specify the location of the image.
The third parameter (num) is how many copies of that image we require and the last parameter (speed) will dictate how fast the star moves across the page.

init: function (container,image,num,speed) {
}

Then we initialise the container variable and create an array to hold the images.

init: function (container,image,num,speed) {
    container = document.getElementById(container);
    var images = new Array();
}

We then use a for loop to create as many images as required. The ‘src’ attribute for each image is the image parameter passed to our function.

init: function (container,image,num,speed) {
    container = document.getElementById(container);
    var images = new Array();
    for (var i = 0;i < num; i++) {
        images[i] = document.createElement('img');
        images[i].src = image;
    }
}

The next 2 lines place each image in a random position within the container. Remember, the container (header) is 200px high by 1000px wide.

init: function (container,image,num,speed) {
    container = document.getElementById(container);
    var images = new Array();
    for (var i = 0;i < num; i++) {
        images[i] = document.createElement('img');
        images[i].src = image;
        images[i].style.top = Math.floor(Math.random()*201) + 'px';
        images[i].style.left = Math.floor(Math.random()*1001) + 'px';
    }
}

Finally, we render the image inside the container and animate it using the animate method (which we haven’t written yet).

init: function (container,image,num,speed) {
    container = document.getElementById(container);
    var images = new Array();
    for (var i = 0;i < num; i++) {
        images[i] = document.createElement('img');
        images[i].src = image;
        images[i].style.top = Math.floor(Math.random()*201) + 'px';
        images[i].style.left = Math.floor(Math.random()*1001) + 'px';
        container.appendChild(images[i]);
        Backdrop.animate(images[i],speed);
    }
}

Hopefully that has made some kind of sense to you!. Now we need to create the animate method. This will take 2 parameters, img and speed, both passed from the init method.

animate: function (img,speed) {
}

We find out where the image is placed:

animate: function (img,speed) {
    currentPos = parseInt(img.style.left);
}

Then check to see if the image is still within the container. If it is, we move it to the left, if not, we reset it’s position to the right hand side of the container. Notice that we also give it a new random ‘top’ position.

animate: function (img,speed) {
    currentPos = parseInt(img.style.left);
    if (currentPos >= 0) {
        newPos = currentPos - speed;
        img.style.left = newPos + 'px';
    } else {
        img.style.left = '1000px';
        img.style.top = Math.floor(Math.random()*201) + 'px';
    }
}

Finally, we use setTimeout to repeat this method every 50ms.

animate: function (img,speed) {
    currentPos = parseInt(img.style.left);
    if (currentPos >= 0) {
        newPos = currentPos - speed;
        img.style.left = newPos + 'px';
    } else {
        img.style.left = '1000px';
        img.style.top = Math.floor(Math.random()*201) + 'px';
    }
    setTimeout(function(){Backdrop.animate(img,speed)},50);
}

And that’s our Backdrop object finished. All we need to do now is call it when the page loads: We call it for once for each of our images and set different speeds, number of stars etc.

window.onload = function () {
    Backdrop.init(80,'images/starbright.png',1,'header');
    Backdrop.init(30,'images/starmed.png',3,'header');
    Backdrop.init(20,'images/stardark.png',5,'header');
}

Save all of the above Javascript into a file called ‘starfield.js. It will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var Backdrop = {
    init: function(num,image,speed,container) {
        container = document.getElementById(container);
        var images = new Array();
        for (var i = 0;i < num; i++) {
            images[i] = document.createElement('img');
            images[i].src = image;
            images[i].style.top = Math.floor(Math.random()*201) + 'px';
            images[i].style.left = Math.floor(Math.random()*1001) + 'px';
            container.appendChild(images[i]);
            Backdrop.animate(images[i],speed);
        }
    },
    animate: function(img,speed) {
        currentPos = parseInt(img.style.left);
        if (currentPos >= 0) {
            newPos = currentPos - speed;
            img.style.left = newPos + 'px';
        } else {
            img.style.left = '1000px';
            img.style.top = Math.floor(Math.random()*201) + 'px';
        }
        setTimeout(function(){Backdrop.animate(img,speed)},50);
    }
};
window.onload = function () {
    Backdrop.init(80,'images/starbright.png',1,'header');
    Backdrop.init(30,'images/starmed.png',3,'header');
    Backdrop.init(20,'images/stardark.png',5,'header');
}

PS. If you value your sanity, don’t bother trying to get this to work in IE6! Instead use a conditional comment so that IE6 doesn’t load the Javascript and use a static image for the header.

Similar Posts:

Posted by ElanMan at 10:43 pm  Tagged with: , , , , , , , , , ,

  2 Responses to “Animated Page Header”

  1. Animated JavaScript Page Header - Tutorial Collection says:
    June 7, 2009 at 7:32 pm

    [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 1:02 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  2. Beben Koben says:
    October 1, 2010 at 6:19 pm

    hihihi so funny…
    thanks ;)

   
© 2012 ElanManSuffusion theme by Sayontan Sinha

Page optimized by WP Minify WordPress Plugin