Time for action – creating an animated header

The underlying page for this example will be relatively straight-forward, with just a <header> element whose background-position we'll animate manually:

  1. The header of the example page will consist of just an empty <header> element:
    <header>
</header>
  2. Save this as animated-header.html. The CSS is even simpler, with just a single selector and a few rules:
    header {
  display:block; width:960px; height:200px; margin:auto;
  background:url(../img/header.jpg) repeat 0 0;
}
  3. Save this as animated-header.css. We'll need to link to the file from the <head> of the page we just created.
  4. The script itself is also surprisingly simple. Add the following code to the function at the end of the <body>:
    var header = $("header"); ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial