I’ve released my latest little DOM Scripting experiment into the wild here at adactio. It’s a simple little animation that responds to mouseovers in a list of links.
You can see it in action over in the portfolio section where I’ve made a little slideshow of archived sites. There’s another version on the "about this site" page. That one has both vertical and horizontal scrolling.
The implementation isn’t quite what I originally planned. I wanted to achieve the animation effect by sliding a background image around. This background image would be contained within a <div> that has a fixed size and the overflow property set to none.
That worked absolutely fine in every browser except one. Guess which one?
Yes; as usual, Internet Explorer caused much grinding of hair and pulling of teeth.
Microsoft’s web browser insisted on downloading the background image anew every time its position changed. I couldn’t see any way of getting around that problem so I went with a slightly different approach.
Instead of moving the background image of the <div>, I’ve placed an <img> tag inside the <div>. This seems like a less elegant solution to me but it appears to be working fine.
Here’s what happens: when the page loads, a function is triggered. This function checks to see if the page has a list with a specific ID. If it does, then a <div> element is created with the DOM. An <img> element is also created and placed within the <div>. The <div> is then inserted into the page, right before the link list.
Now, I loop through each link of the list and an "onmouseover" behaviour to each one. Mousing over each link will slide the <img> in the <div> into a new position. I also apply the same behaviour to "onfocus" so that people navigating without a mouse get the same effect.
To get a nice easing in and out effect on the animation, I recalled something from my childhood maths classes.
My teacher was trying to explain the concept of limits by talking about a frog trying to cross a pond. Every jump the frog makes is exactly half as long as the one before. With its first jump, the frog crosses half the pond. With its next jump, it covers half that distance. The question was, "when would the frog reach the other side of the pond?" The answer is never.
So what has this got to JavaScript? Well, I thought I’d apply everything I learned about frogs to my animation script. To move the image in the <div>, I first calculate how far it has to go. Then I divide this distance by a set amount (say, two, if we’re sticking with frog-like movement) and I move the image by this amount. Wash, rinse, repeat.
The difference between me and the frog is that, when I divide the distance yet to be traversed, I round up the figure. That way, the image actually reaches the other side of the pond… I mean, <div>.
As with any JavaScript animation, the movement varies from browser to browser and machine to machine. It moves pretty smoothly in Safari, slightly slower in Firefox and slower again in Internet Explorer.
See for yourself. It’s not exactly an earth-shattering addition to the canon of DOM scripts but I had good fun writing it.