Instead of hiding the mouse, and moving a DOM element around, this manipulates the actual cursor itself.
You can set an animated (or static) cursor for the page's body, and for individual elements (tags, divs, paragraphs, buttons, links...). You can fully theme the cursor for your pages!
You can easily add your own animations too! Animations can be as long as you want.
Simply make a call to...
//for the body
//for individual elements, like the list tag
animateCursorForElement(['folder/path-to-image1.jpg', 'folder/path-to-image2.png...'], "li");
All cursors must be nested in the "cursorImages/" folder. You can nest them inside other folders within that, but make sure to pass it the nested folder name too.
All paths are relative within the "cursorImages/" folder.
Since this uses the CSS's cursor: property the same rules apply.
Cursors should NOT be larger than 32 x 32 pixels in size, to stay supported across all browsers.
You can use PNG, GIF, JPG, BMP, CUR.
To start, include the animatedWebCursors.js file in your page. Copy and paste the following between your page's head tag...
and simply cusomize the "window.load" event at the end of the animatedWebCursors.js file.
Bring back those classic Windows XP animated cursors!
This file includes ready made access to every classic cursor from the Windows XP themes! Yes, they're back and you can have them on your website!
This includes those cute dinosaurs, the horse, the mouse with the wagging tail...
You can call any of the default functions for setting an animated cursor such as...
Yes... OK... Click on any button to change your current cursor to one of the default sets. Changing cursors is easy and flexible! You can overwrite them as often as you want...
Like mentioned, you can make a theme with cursors by applying a specific animated cursor (or static cursor) to individual elements (tags), such as button, a, input... Try mousing over these elements for a small demo!
animateCursor(['Custom/cupcakecursor/cupcakecursor_frame1.png', 'Custom/cupcakecursor/cupcakecursor_frame2.png', 'Custom/cupcakecursor/cupcakecursor_frame3.png']);
//example of this custom animation set to the bold tag...
animateCursorForElement(['Custom/cupcakecursor/cupcakecursor_frame1.png', 'Custom/cupcakecursor/cupcakecursor_frame2.png', 'Custom/cupcakecursor/cupcakecursor_frame3.png'], "strong");