Javascript cursor replacement

Question

I'm looking to use an animated cursor in JS. CSS custom cursors do not animate in most browsers.

I have heard of people (can't recall who) doing this. They hide the regular cursor (by setting a transparent custom cursor), then create an image that follows the cursor in JS.

Anyone have any better ideas to achieve animated cursors? Is there a jquery plugin that will do this for you? I recall reading a blog that talks about this. Anyone heard of people doing this before?

Thanks.

Answer 1

Have you tried using .ani cursors? Also see controlling cursors with css. I guess you could try to hack this together yourself, but I don't see how you're going to hide the original cursor. Do you really need anything other than the widely supported usualy functionality?

li { cursor: text; }
a {cursor: pointer;}

Answer 2

Not tried this, but you should be able to create a custom CSS rule (create a class, like .customcursor, set the cursor to url(/path/to/image.png) and then, on a setInterval() cycle between images. Then apply that to your document body.

I haven't a clue how often you can run this, but it should work.

Answer 3

You can use a transparent cursor, but some in some browsers it will show a black square instead of being transparent. Also, I have seen a couple examples that use canvas to add effects to the cursor.