Creative Custom Cursor Library – MagicMouse.js

Category: Javascript | March 26, 2020
Author: dshongphuc
Views Total: 46
Official Page: Go to website
Last Update: March 26, 2020
License: MIT


Creative Custom Cursor Library – MagicMouse.js


MagicMouse.js is a custom cursor library to create a cool, interactive cursor with a circle that follows the mouse pointer.

How to use it:

1. Insert the magic-mouse.css and magic_mouse.js from the dist folder.

<link href="dist/magic-mouse.css" rel="stylesheet" />
<script src="dist/magic_mouse.js"></script>

2. Initialize the MagicMouse.js with default options.


3. Hide the system cursor if needed.

html,* { cursor: none; }

4. Apply a hover effect to the custom cursor.

<button class="magic-hover magic-hover__square">
  Hover Me

5. Customize the cursor effect.

  "hoverEffect": "circle-move"

6. Disable the outer circle.

  "cursorOuter": "disable",

7. Use default cursor instead.

  "defaultCursor": true

8. Set the size of the outer circle.

  "outerWidth": 30,
  "outerHeight": 30

You Might Be Interested In:

Leave a Reply