The underlying page for this example will be relatively straightforward, with just a <header> element whose background-position we'll animate manually:
The header of the example page will consist of just an empty
<header>element placed inside the<body>tag:<header> </header>
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; }Save this as
animated-header.css. We'll need to link to the file from the<head>of the page we just created.The script itself is also surprisingly simple. Add the following code to the function at the end of the
<body>element:var header = $("header"); header.css("backgroundPosition", "0 0"); var bgscroll = function() { var current = parseInt(header.css( "backgroundPosition").split(" ")[1]), newBgPos...