Warning: don't do this. Stop it! Just. Don't.
There exists the ability for your web page to use a custom cursor by providing a URL to an image. But animated GIFs, etc are not allowed. Seems the browser vendors don't want us to get too crazy, 90s-style. And rightfully so.
But turns out you can use
canvas , instead of URI to a static image. And you can animate the thing in the canvas.
I grabbed an animation example from MDN . It's a clock. But you can use anything, e.g. something related to what your app is doing.
I only made two changes to the example.
First, the canvas is not static, but created in memory:
var canvas = document.createElement('canvas'); canvas.width = canvas.height = 128; var ctx = canvas.getContext('2d');
128 appears to be the limit of how large the cursor can be.
The second change is to convert the canvas image to data URI and make the cursor be that URI.
document.documentElement.style.cursor = 'url(' + canvas.toDataURL() + ') 64 64, auto';
64 64 coordinates are so that the image can be centered.
And voila - an animated custom mouse cursor that even extends beyond the browser window.
And the demo once again
Should browsers disallow this? Maybe, probably. Should you abuse this and party like it's 1995? You better not.
Tell your friends about this post:Facebook,, Google+
Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...
Meanwhile, hit me up on twitter @stoyanstefanov