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.
My Changes
Inspired by the code's simplicity, I started playing around with how to remove the sudden jump every time you started the animation. After about 25 minutes of tinkering, I wound up with this code:
cloud = 0;
mountain = 0;
hill = 0;
forest = 0;
$("#branding").bind('mouseenter',function(e) {
cloud = parseInt($("#cloudLayer").css("background-position"))*4-e.clientX;
mountain = parseInt($("#mountainLayer").css("background-position"))*3-e.clientX;
hill = parseInt($("#hillLayer").css("background-position"))*2-e.clientX;
forest = parseInt($("#forestLayer").css("background-position"))-e.clientX;
});
$("#branding").mousemove(function(e) {
mouseX = e.clientX;
$("#cloudLayer").css("background-position", Math.floor((mouseX+cloud)/ 4)%800 + "px 0");
$("#mountainLayer").css("background-position", Math.floor((mouseX+mountain)/ 3%652) + "px 0");
$("#hillLayer").css("background-position", Math.floor((mouseX+hill)/2%800) + "px 0");
$("#forestLayer").css("background-position", (mouseX+forest)%800 + "px 0");
});
With the new code added, the initial position captured in lines 6-11, is taken into account in the slightly rewritten lines 13-18, and the background simply follows the header's motion without having to immediately adjust to the mouse's literal position.
Aftermath
Once I had fully debugged this code, I prepared a test page and sent it to Mr. Weems. After a brief back and forth (in my excitement I accidentally left the links pointing to my computer, not the server), he replied that he liked it, and minutes later, my code was live on his site. I didn't expect him to respond to my code suggestion, much less adopt it immediately. Better still, he even gave me credit in the code for writing it.
So, there you have it: my first "major" web design accomplishment. I'm thrilled. Check out the header at CSSquirrel.com.
Comments
Dad wrote:
Kyle Weems wrote:
SeanJA wrote:
SeanJA wrote:
Bobby Jack wrote:
(Whilst we're trying to improve each other's work, I notice that the 'info spans' in this form don't line up quite as they should - "form li input { float: left; } li { overflow: hidden; }" looks a lot better, IMO. And I also think those spans would work better as labels - I only recently discovered the beauty of the many-to-one relationship between labels + inputs)
Mom wrote:
William Flake wrote:
Also, it had never occurred to me to use multiple labels. Semantically, that makes lot more sense, plus it gives a much larger clicking target. Thanks a lot!
Nate Eagle wrote:
Lynn Kidman wrote:
John Minner wrote:
Mirek Komárek wrote:
via http://www.forosdelweb.com/f127/invalid-argument-jquery-1-3-2-js-line-1061-character-4-jquery-error-con-ie7-8-a-755287/
Wholesale Sunglasses wrote: