Tuesday, December 9, 2008

Follow the mouse cursor with jQuery

At the moment on Radio New Zealand This Way Up is running a feature on keeping bees in your backyard. One of the ideas our web producer Dempsey Woodley came up with for the Bee pages was a bee chasing the cursor around the screen.

The pair of us hunted for code to do this, but most of it seems to have been designed when Netscape 4 was still a dominant force in the browser market. The web also seems to have moved on from such effects.

The first couple Dempsey tried locked the bee image to the cursor, and did not really give a sense of being chased. Then he found the Mouse Squidie effect from Javascript-FX. Perfect.

Two problems though - it did not work in IE 6+, and was not configurable without hacking into the code.

So I have rewritten the thing from scratch based on the original algorithm, and using jQuery to replace the old library functions. I also added a bunch of configuration options so that the effect can be fine tuned.

You can see the new version of the script on the Bee chased page. Like most effects of this type, a little goes a long way.

It's up on github.


Nigel Ramsay said...

I love it! Nice work Richard and Dempsey.

Good to see you giving back to the community.

Fraz Ahmed فراز احمد said...

I like your script. Here is my solution. I was in need of moving a flash animation with mouse: