An example of the lite version...



No default cursor functions come with this...

You must add what you want by calling either... 

animateCursor(arr_animation);
//or
animateCursorForElement(arr_animation, str_tagName);


...and passing your own values.

To start, you must first add the script to your html page by copy and pasting the following beneath your head tag 

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


  1. Everything must be nested in an array, so the format of (['path1.png', 'path2.png' ... ]); is important.
  2. Cursors should not be larger than 32 x 32.
  3. Customize the window.addEventListener("load",function() listener in the animatedWebCursorLite.js file to add your cursors. For example...
  4. This uses the CSS cursor property, so the same rules apply. You can use PNG, GIF, JPG, BMP, CUR, etc. images.


//---------------ON PAGE LOAD, CUSTOMIZE THIS...---------------//

//customize this with your desired functions
//this starts the cursor when the page loads...
//if you want to have the cursor start another way, then comment this out
window.addEventListener("load",function(){
	
	//make a theme here!
	//see https://www.w3schools.com/tags/ for a list of all elements
	
	//note that everything must be passed as an array, so the brakets ['...'] are important.
	
	animateCursor(['Custom/kitty/kitty1-frame1.png', 'Custom/kitty/kitty1-frame2.png']);
	
	//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");
	//example of a custom animation set to the bold tag...
	animateCursorForElement(['Custom/cupcakecursor/cupcakecursor_frame1.png', 'Custom/cupcakecursor/cupcakecursor_frame2.png', 'Custom/cupcakecursor/cupcakecursor_frame3.png'], "strong");
});