Fancy Animated Cursor Using Custom Images – animatedCursor.js

Category: Javascript | November 13, 2020
Author:alienmelon
Views Total:46 views
Official Page:Go to website
Last Update:November 13, 2020
License:MIT

Preview:

Fancy Animated Cursor Using Custom Images – animatedCursor.js

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

You Might Be Interested In:


Leave a Reply