Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery

How To Build an Animated Header in jQuery

July 30th, 2009


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.

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.

Animated Header Background

 

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.

Header Background Instructions

 

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.

Header Overlay Diagram

 

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>

<!--[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]-->

</head>

<body>
   
<div id="wrapper">
    <div id="header">
       
        <!-- 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>

<script type="text/javascript" charset="utf-8">

    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);
   
</script>  

</html>

 

 




Top