How To Build an Animated Header in jQuery

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.

Download Example

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>

Download Example

Author: Shawn Categories: CSS, Front End Development, HTML, Javascript Tags: CSS, HTML, Javascript, JQuery, Tutorials

Comments (10)

Sérgio Soares

August 2nd, 2009 at 18:11 | #1

Reply | Quote

Nice tutorial
Josh

August 6th, 2009 at 22:48 | #2

Reply | Quote

Thanks for the great tutorial!
chris

September 8th, 2009 at 09:30 | #3

Reply | Quote

hi. thanks for the great work. could you give me a clue as to what changes i would need to make in order to scroll a super-wide image horizontally instead? thanks.
Tonero

September 8th, 2009 at 11:59 | #4

Reply | Quote

What could be more interesting. Well done!
Shawn

September 8th, 2009 at 22:24 | #5

Reply | Quote

@chris
Well it’s a little more trick with a horizontal. you’ll have to make sure it’s a fixed width. You’ll need to know the width so you can loop the image accordingly.

So what you’ll need to do is:
- create a horizontal image
- change var imageHeight to the width of your image.
- change var headerHeight to the width of your stage.
- Lastly replace
$(’#header’).css(”background-position”,”0 “+current+”px”);
with
$(’#header’).css(”background-position”,”+current+”px 0″);

I didn’t test this out to make sure it works, but I think the theory is there.
Kemal ONUR

October 8th, 2009 at 16:55 | #6

Reply | Quote

Thanx for the great tutorial…
Beni

October 28th, 2009 at 06:13 | #7

Reply | Quote

@Shawn
Hey Great tutorial, cheers for the information!
Im new to jquery…
Im trying to do something similar but again horizontally.
I tried ur above code without, and couldnt get it working =(

I have a repeating pattern running along the x axis on my #body background.
Is it possible for the entire body background to move along the xaxis horizontally?

Cheers
Birgit

November 7th, 2009 at 12:47 | #8

Reply | Quote

thanks for sharing this interesting effect… will remember it for future projects
Daniel Patterson

November 9th, 2009 at 12:15 | #9

Reply | Quote

Did you ever figure out how to animate horizontally? I tried the code addressed above but to no avail.

“- Lastly replace
$(’#header’).css(”background-position”,”0 “+current+”px”);
with
$(’#header’).css(”background-position”,”+current+”px 0″);”
charisma

November 19th, 2009 at 11:20 | #10

Reply | Quote

hi this is really awesome imagination for me..thanks..i like this information that i think can support my imagination ,actually i also have animation for background image with jquery you can check it at my web site , product menu > another design >and choose my type ,thanks.