Of Squirrels and Men
As some of you may have figured out by now, I like to consider myself a web designer. However, up until now, the extent of my online presence has stretched about as far as my bass performance skills have: playing around in front of my family and a couple of friends. Case in point: this website.
As part of my playing around, I follow the postings and thoughts of many notable members of the web design community. One such developer is Kyle Weems, also known by his online persona: CSSquirrel. On Saturday, he posted a blog entry describing how his site's cool animated header works. It was an interesting read, but what stuck out in my mind was how simple the code was.
The Existing Code
As mentioned in his post, the entire code appeared as follows:
$(”#branding”).mousemove(function(e) {
mouseX = e.clientX;
$(”#cloudLayer”).css(”background-position”, Math.floor(mouseX / 4) + “px 0″);
$(”#mountainLayer”).css(”background-position”, Math.floor(mouseX / 3) + “px 0″);
$(”#hillLayer”).css(”background-position”, Math.floor(mouseX / 2) + “px 0″);
$(”#forestLayer”).css(”background-position”, mouseX + “px 0″);
});
The gist of this code (written in jQuery) is that whenever the mouse is located in the main header, the script tracks the mouse's position, and moves the 4 images which make up the header at different speeds. It worked really well, especially given how little code it took. In my view, though, it had one major problem: there was a rather unsightly jump as the mouse entered the frame. The reason for this was that the images are positioned based solely on the mouse's position, with no respect given to the existing position.