How To Build an Animated Header in jQuery

Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something.

Devirtuoso

What We Are Building

We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect.

How it’s Going to Work

The header background image is going to be super tall. Here is the important part, we’re making a header that is 300px tall. The image’s top 300px and bottom 300px have to be the same. This will allow us to scroll our header seamlessly. So dust of your Photoshop skills you’re going to need them. Not to fret, it’s not that difficult. Just copy the top 300px of your image and paste them on the bottom. Then blend what was originally on your background with what you pasted in.

Now that we have our background image, we will also need to create a shadow overlay image. This will basically be a png with a transparent center that gradually turns to black on the edges. With the CSS we are going to lay this on top of our header to give a dramatic effect.

After that it’s just a matter of animating the background image with jQuery so it scrolls.

Getting Started

The first thing we’re going to need is the HTML in place. It’s pretty straight forward. We have a wrapper div to center the website, a header div for the animation, another div within the header for the shadow overlay, and finally divs for the navigation and body copy. It’s a lot of divs, but what do you expect, it’s the framework

Here is the HTML:

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
31

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8” />
<title>Animated Header</title>
</head><body>
<div id=“wrapper”>
<div id=“header”><!– Div is for Shadow Overlay–>
<div>
<!– Title –>
<h1>Animated Header Background</h1>
</div>
</div>
<div id=“nav”>
<!– Navigation Goes HERE –>
</div>
<div id=“body”>
<!– Body Content Goes HERE –>
</div>
</div>
</body>

<!– Import jQuery–>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js” type=“text/javascript” charset=“utf-8”></script>

</html>

The CSS

We aren’t going to do anything too difficult here. Here is a list of what was done:

Center the website
Give the header a height and a background image
Style and position the text within the header
Create a shadow overlay
Give basic style to the header and navigation bar.

Here is the CSS:

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
31
32
33
34
35
36
37
38
39
40

body{
background-color: #000;
}/* Center the website */
#wrapper{
width:920px;
margin:0 auto;
}/* Give the header a height and a background image */
#header{
height:300px;
background: #000 url(background.jpg) repeat-y scroll left top;
text-align:center;
}

/* Create a Shadow Overlay */
#header div{
width:920px;
height:300px;
background: transparent url(overlay.png) no-repeat scroll left top;
}

/* Vertically position header text and style it*/
#header h1{
padding-top:125px;
font-family: Arial, “MS Trebuchet”, sans-serif;
color:white;
}

/* Give basic styles to the body and the navigation */
#body{
background-color:#efefef;
height:500px;
}
#nav{
height:35px;
background-color: #111;
}

Just a note, the png transparency won’t work in IE6. If you choose to optimize for IE6 you will need to add this piece of code to use the overlay.

HTML:

1
2
3
4
5
6
7
8

<!–[if lte IE 6]>
<style type=”text/css” media=”screen”>
#header div{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’overlay.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

The jQuery

There are a couple ways of animating the background with jQuery. You can use the jQuery plugin that allows you to animate the CSS background-position attribute. This is the same plugin we used for making a table row highlighter in jQuery. I opted not to use this as I found the performance was lagging. Instead I went with an interval that calls a function repeatedly. It’s a little uglier to look at but the performance is a lot better.

Here is the jQuery:

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

var scrollSpeed = 70;     // Speed in milliseconds
var step = 1;     // How many pixels to move per step
var current = 0;   // The current pixel row
var imageHeight = 4300;     // Background image height
var headerHeight = 300;     // How tall the header is.//The pixel row where to start a new loop
var restartPosition = –(imageHeight – headerHeight);function scrollBg(){

//Go to next pixel row.
current -= step;

//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}

//Set the CSS of the header.
$(‘#header’).css(“background-position”,“0 “+current+“px”);

}

//Calls the scrolling function repeatedly
var init = setInterval(“scrollBg()”, scrollSpeed);

Bring it All Together

That’s all there is to it. Here is the code all together.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8” />
<title>Animated Header</title>
<style type=“text/css” media=“screen”>body{
background-color: #000;
}/* Center the website */
#wrapper{
width:920px;
margin:0 auto;
}

/* Give the header a height and a background image */
#header{
height:300px;
background: #000 url(background.jpg) repeat-y scroll left top;
text-align:center;
}

/* Create a Shadow Overlay */
#header div{
width:920px;
height:300px;
background: transparent url(overlay.png) no-repeat scroll left top;
}

/* Vertically position header text and style it*/
#header h1{
padding-top:125px;
font-family: Arial, “MS Trebuchet”, sans-serif;
color:white;
}

/* Give basic styles to the body and the navigation */
#body{
background-color:#efefef;
height:500px;
}
#nav{
height:35px;
background-color: #111;
}

</style>

</head>

<body>

<!– Div is for Shadow Overlay–>
<div>
<h1>Animated Header Background</h1>
</div>
</div>
<div id=“nav”>
<!– Navigation Goes HERE –>
</div>
<div id=“body”>
<!– Body Content Goes HERE –>
</div>
</div>

</body>

<!– Import jQuery–>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js” type=“text/javascript” charset=“utf-8”></script>

//The pixel row where to start a new loop
var restartPosition = -(imageHeight – headerHeight);

function scrollBg(){

//Go to next pixel row.
current -= step;

//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}

//Set the CSS of the header.
$(‘#header’).css(“background-position”,”0 “+current+”px”);

}

//Calls the scrolling function repeatedly
var init = setInterval(“scrollBg()”, scrollSpeed);

</script>

</html>