On animated cursors
First published on Ka of Isis 140319
As far as I understand, most major browsers do not support animated cursors. Mostly for the better, I guess, but I work on this family intranet where a kitten is chasing a ball (the mouse cursor, really) around in a browser window. Yes, that’s Neko – who has been ported between computer programs, screen savers and widgets since the 1980s. I am able to replace the standard cursor with the image of a static ball with the following CSS code:
html {cursor: url("ball.gif"), auto;}
The auto in there is a fallback should the image go missing or the browser go who knows where.
Fig. Move the mouse into the black area to see the cursor change to a custom static ball. Not very exciting.
With the kitten running and the ball static … that is rather lame. Searching around I stumbled upon a promising script at orangeSPLoTCH. Maybe it was possible to add some dynamism, after all?
Fig. Move the mouse into the black area to see the cursor change to a custom animated ball. Exciting? For Neko it is!
The original code was simplified and rewritten to work in responsive web design where document height and gutters change according to screen real estate and manipulation of viewport. Take a look at the page source to see the script.
Neither of this has been tested in anything but my trusted Safari browser on a Macintosh. That is where I need it, anyway. The rest is up to you.
I must admit that it is somewhat over the top taxing a system with lines and lines of code for something as silly as moving a bitmap ball. But if you found this article in this site’s menu, observe that it stated ‘Note to self’. It is all for my daughter who always loved the Neko sceen saver on my Macintosh SE. Too bad I cannot include the kitten on this here page, for the JavaScript animating Neko – that is Japanese for cat, by the way – has a license attached to it.