Build an Animated Header in jQuery...

0 comments 5:40 AM Posted by Unknown
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.

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.

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 Sample Attachment Below:


 Thanks & Have Fun :)


Written by

0 comments:

Subscribe to: Post Comments (Atom)