Creating a fading header

Since I’ve gotten lots of emails asking me how I created the fading header graphic for Bits and Pixels I’m going to write a tutorial explaining how created the effect. I’ll be creating the effect using some basic XHTML and CSS and some unobtrusive Javascript, using the jQuery library, for the effect itself.

I’ve chosen jQuery because I like the way it’s built, find the elements you wish and do something with them. If you prefer another library, or just don’t want to use any library at all, that’s fine too (but you’ll need to write your own fade-function). The code shouldn’t differ too much, and since I’ll be explaining all the steps you shouldn’t have any problems translating it to the toolkit of your choice.

The image

This is the image that I’ll be using. It’s a fast mock-up of a header with a little bit of grunge. I’ve included the regular header and the hover effect in the same image. This lowers our HTTP requests, avoids flickering when we hover the image and makes our CSS more straight forward.

Header image

The HTML and CSS

The HTML is very straight forward. We have a h1 element with a link inside of it. We’re going to hook our Javascript onto our header (or whichever element we want to add this effect to) and add some custom markup.

<h1 id="header"><a href="#">Awesome header</a></h1>

Now we’ll add some CSS to style our header and give it some imagery

#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat;
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}

The reason to why we’re setting the h1 to position: relative; is to make it easier to position the imagery for the hover when we add it.

Here’s an example showing what we’ve got so far.

When we load the page we’re going to add some custom markup, so this is what we’ll have to work with in our DOM. The reason we’re adding the span before the anchor is to avoid some issues with Internet Explorer 6 and the z-index property.

<h1 id="header">
<span class="fake-hover"></span>
<a href="#">Awesome header</a>
</h1>

So, let’s start out by adding this markup manually into our document so we can see what it will look like when we apply the effect. Then we’ll adding the following CSS:

#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px;
}

It’s important to make sure that the text doesn’t shift a pixel or two since it will be very obvious when the effect kicks in. You may want to try this a couple of times by removing and adding the span to make sure it’s properly aligned.

Here’s an example of what we’ve got so far.

The Javascript

Now that we’re all set markup and CSS-wise it’s time to start adding some Javascript goodness! First of all, remove the fake span from your document.

As I wrote earlier, I’ll be using jQuery, but feel free to follow along no matter what library you may or may not be using. I’m going to write this using JSON to make the script more modular. I’ll also write it as a more general function so it’s easier to add the effect to any element you want to on your site.

First load the jQuery library

<script type="text/javascript" src="jquery-1.2.3.min.js">
</script>

Now let’s add some code. I’ll be adding it directly into the document but you may want to use an external file for a live site.

var Header = {
addFade : function(selector){
$("").css("display",
"none").prependTo($(selector));
// Safari dislikes hide() for some reason
}
};

Okay. This function takes a CSS-selector as argument, adds our fake hover and hides it. Simple stuff. Now let’s expand our Header object adding some Javascript events for hovering and removing the mouse, and finally making it load when the page loads. When the mouse is hovered over the header, we fade in the other header graphics, and when the mouse is moved off we fade it out, using jQuery’s built in effects.

var Header = { // Let's write in JSON to make it more modular addFade : function(selector){ $("").css("display", "none").prependTo($(selector)); // Safari dislikes hide() for some reason $(selector+" a").bind("mouseenter",function(){ $(selector+" .fake-hover").fadeIn("slow"); }); $(selector+" a").bind("mouseleave",function(){ $(selector+" .fake-hover").fadeOut("slow"); }); } }; $(function(){ Header.addFade("#header");

// This makes sure our function executes when the pages load // It will add a fake hove to the #header element

});