Fancy Animated Cursor Using Custom Images – animatedCursor.js

Preview:

Description:

A fancy JavaScript library to create an animated custom cursor when hovering over elements.

The library sets the cursor image to an array that’s looped through like animated frames.

How to use it:

1. Add the script animatedCursor.js to the document.

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

2. Enable the animated cursor and done.

animatedCursor();

3. Override the default cursor frames.

var arr_cursorAnimationFrames = ["IMG_CURSOR_01_FRAME01.png", "IMG_CURSOR_01_FRAME02.png", "IMG_CURSOR_01_FRAME03.png", "IMG_CURSOR_01_FRAME04.png"];
var arr_buttonAnimationFrames = ["IMG_CURSOR_02_FRAME01.png", "IMG_CURSOR_02_FRAME02.png", "IMG_CURSOR_02_FRAME03.png", "IMG_CURSOR_02_FRAME04.png"];
var arr_textAnimatedFrames = ["IMG_CURSOR_03_FRAME01.png", "IMG_CURSOR_03_FRAME02.png", "IMG_CURSOR_03_FRAME03.png", "IMG_CURSOR_03_FRAME04.png"];
var arr_miscAnimatedFrames = ["IMG_CURSOR_04_FRAME01.png", "IMG_CURSOR_04_FRAME02.png", "IMG_CURSOR_04_FRAME03.png", "IMG_CURSOR_04_FRAME04.png"];