Submit your widget
HomeImage EffectsAnimated Header in jQuery

Animated Header in jQuery

Created 14 years ago   Views 16410   downloads 2290    Author n/a
Animated Header in jQuery
View DemoDownload
98
Share |

We'll show you how to animate your header’s background image using jQuery to give your website that little extra something.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.

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:

 

<!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:

 

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:

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

It’s a little uglier to look at but the performance is a lot better.

Here is the jQuery:

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

You might also like