Customizable animated cursor pointers for the web.

Make a full cursor theme for your website!

Click here to download it from github.



This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's cursor functionality.
Instead of hiding the mouse, and moving a DOM element around, this manipulates the actual cursor itself.

This javascript file includes support for both animated and non-animated cursors. You can easily mix things up and use both!


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
animateCursor(['folder/path-to-image1.jpg', 'folder/path-to-image2.png...']);
//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... 

<script src="animatedWebCursors.js"></script>


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... 

	bananaani();//banana
		dinosau2ani();//the cute dinosaur
		dinosaurani();//the dinosaur...


Yay! How exciting... Let me try!

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!





This is a link



This is a header!

This is a h2!

This is a h3!

This is a h4!

This is a h5!
This is a h6 header!


Each animated cursor has a _tag function that you can call to apply it to an element for which you want to change the cursor.
Example code for the above...


window.addEventListener("load",function(){

		//default cursor (for the page)
		dinosau2ani();
	
		//other elements
		dinosaurani_tag("p");
		bananaani_tag("button");
		handnoani_tag("input");
		dinosaurani_tag("a");
		handani_tag("h1");
		horseani_tag("h2");
		pianoani_tag("h3");
		hourglasani_tag("h4");
		handwaitani_tag("h5");
		wagtailani_tag("h6");
	
	});


Support for non animated cursors is included too. You can make a full cursor theme with both static and animated cursors...



You can even have your own custom cursor animations!

Simply pass an array with paths to your desired image sequence, that's nested in the "cursorImages" folder.

  1. Cursors should not be larger than 32 x 32 pixels, to be supported across all browsers.

  2. To adjust the animation speed look for the num_animationSpeed variable in the animatedWebCursor.js javascript file.
    Higher values = slower animation. Lower values = faster.

Click on some of the following demos to see!
(These cursors are old geocities cursors taken from gifcities.com)



animateCursor(['Custom/snoopy-frame1.png', 'Custom/snoopy-frame2.png']);
	



//an example of a folder nested in the "Custom/" folder... paths are relative within the "cursorImages/" folder...
animateCursor(['Custom/kitty/kitty1-frame1.png', 'Custom/kitty/kitty1-frame2.png']);
	



animateCursor(['Custom/partygirl/partygirl-frame1.png', 'Custom/partygirl/partygirl-frame2.png', 'Custom/partygirl/partygirl-frame3.png', 'Custom/partygirl/partygirl-frame4.png', 'Custom/partygirl/partygirl-frame5.png', 'Custom/partygirl/partygirl-frame6.png', 'Custom/partygirl/partygirl-frame7.png', 'Custom/partygirl/partygirl-frame8.png', 'Custom/partygirl/partygirl-frame9.png', 'Custom/partygirl/partygirl-frame10.png', 'Custom/partygirl/partygirl-frame11.png', 'Custom/partygirl/partygirl-frame12.png']);
	



animateCursor(['Custom/flyingheart/flyingheart-frame1.png', 'Custom/flyingheart/flyingheart-frame2.png', 'Custom/flyingheart/flyingheart-frame3.png', 'Custom/flyingheart/flyingheart-frame4.png', 'Custom/flyingheart/flyingheart-frame5.png', 'Custom/flyingheart/flyingheart-frame6.png', 'Custom/flyingheart/flyingheart-frame7.png'])
	



animateCursor(['Custom/kitty/hkanicursor-frame1.png', 'Custom/kitty/hkanicursor-frame2.png', 'Custom/kitty/hkanicursor-frame3.png', 'Custom/kitty/hkanicursor-frame4.png']);
	



animateCursor(['Custom/sparkle/CursorStarSparkle-frame1.png', 'Custom/sparkle/CursorStarSparkle-frame2.png', 'Custom/sparkle/CursorStarSparkle-frame3.png', 'Custom/sparkle/CursorStarSparkle-frame4.png', 'Custom/sparkle/CursorStarSparkle-frame5.png', 'Custom/sparkle/CursorStarSparkle-frame6.png', 'Custom/sparkle/CursorStarSparkle-frame7.png', 'Custom/sparkle/CursorStarSparkle-frame8.png', 'Custom/sparkle/CursorStarSparkle-frame9.png', 'Custom/sparkle/CursorStarSparkle-frame10.png', 'Custom/sparkle/CursorStarSparkle-frame11.png', 'Custom/sparkle/CursorStarSparkle-frame12.png', 'Custom/sparkle/CursorStarSparkle-frame13.png', 'Custom/sparkle/CursorStarSparkle-frame14.png', 'Custom/sparkle/CursorStarSparkle-frame15.png', 'Custom/sparkle/CursorStarSparkle-frame16.png', 'Custom/sparkle/CursorStarSparkle-frame17.png', 'Custom/sparkle/CursorStarSparkle-frame18.png', 'Custom/sparkle/CursorStarSparkle-frame19.png', 'Custom/sparkle/CursorStarSparkle-frame20.png']);

//and here is an example of a custom animation set to a list tag...
animateCursorForElement(['Custom/sparkle/CursorStarSparkle-frame1.png', 'Custom/sparkle/CursorStarSparkle-frame2.png', 'Custom/sparkle/CursorStarSparkle-frame3.png', 'Custom/sparkle/CursorStarSparkle-frame4.png', 'Custom/sparkle/CursorStarSparkle-frame5.png', 'Custom/sparkle/CursorStarSparkle-frame6.png', 'Custom/sparkle/CursorStarSparkle-frame7.png', 'Custom/sparkle/CursorStarSparkle-frame8.png', 'Custom/sparkle/CursorStarSparkle-frame9.png', 'Custom/sparkle/CursorStarSparkle-frame10.png', 'Custom/sparkle/CursorStarSparkle-frame11.png', 'Custom/sparkle/CursorStarSparkle-frame12.png', 'Custom/sparkle/CursorStarSparkle-frame13.png', 'Custom/sparkle/CursorStarSparkle-frame14.png', 'Custom/sparkle/CursorStarSparkle-frame15.png', 'Custom/sparkle/CursorStarSparkle-frame16.png', 'Custom/sparkle/CursorStarSparkle-frame17.png', 'Custom/sparkle/CursorStarSparkle-frame18.png', 'Custom/sparkle/CursorStarSparkle-frame19.png', 'Custom/sparkle/CursorStarSparkle-frame20.png'], "li");
	



animateCursor(['Custom/doomskull-frame1.png', 'Custom/doomskull-frame2.png'])
	



animateCursor(['Custom/DragonflyCMcursor/DragonflyCMcursor_frame1.png','Custom/DragonflyCMcursor/DragonflyCMcursor_frame2.png','Custom/DragonflyCMcursor/DragonflyCMcursor_frame3.png','Custom/DragonflyCMcursor/DragonflyCMcursor_frame4.png']);
	



animateCursor(['Custom/sparkle/cursor2-1_frame1.png', 'Custom/sparkle/cursor2-1_frame2.png']);
	



animateCursor(['Custom/sparkle/cursor8-frame1.png', 'Custom/sparkle/cursor8-frame2.png']);
	



animateCursor(['Custom/cursor-1_frame1.png', 'Custom/cursor-1_frame2.png', 'Custom/cursor-1_frame3.png', 'Custom/cursor-1_frame4.png']);
	



animateCursor(['Custom/sparkle/cursor1_frame1.png', 'Custom/sparkle/cursor1_frame2.png']);
	



animateCursor(['Custom/cursor_cutepronto2_frame1.png', 'Custom/cursor_cutepronto2_frame2.png']);
	



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");
	



animateCursor(['Custom/c035a_frame1.png', 'Custom/c035a_frame2.png', 'Custom/c035a_frame3.png', 'Custom/c035a_frame4.png']);