jQuery 1.4 Animation Techniques - Index of

Other Popular Animations
Time for action – creating an animated header
The underlying page for this example will be relatively straight-forward, with just a
element whose background-position we'll animate manually:
1. The header of the example page will consist of just an empty element:
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
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 :
var header = $("header");
header.css("backgroundPosition", "0 0");
var bgscroll = function() {
var current = parseInt(header.css("
backgroundPosition").split(" ")[1]),
newBgPos = "0 " + (current - 1) + "px";
header.css("backgroundPosition", newBgPos);
};
setInterval(function() { bgscroll() }, 75);
5. When we run the file in a browser, we should find that the background image used
for the slowly scrolls.
[ 218 ]