Creative Custom Cursor Library – MagicMouse.js

Category: Javascript | November 6, 2021
Author:dshongphuc
Views Total:2,682 views
Official Page:Go to website
Last Update:November 6, 2021
License:MIT

Preview:

Creative Custom Cursor Library – MagicMouse.js

Description:

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

Installation:

# NPM
$ npm i magicmouse.js

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.

magicMouse();

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
</button>

5. Customize the cursor effect.

magicMouse({
  "hoverEffect": "circle-move"
});

6. Disable the outer circle.

magicMouse({
  "cursorOuter": "disable",
});

7. Use default cursor instead.

magicMouse({
  "defaultCursor": true
});

8. Set the size of the outer circle.

magicMouse({
  "outerWidth": 30,
  "outerHeight": 30
});

9. Disable the magic cursor by adding the no-cursor class to the target element.

<div class="no-cursor">
...
</div>

Changelog:

11/06/2021

  • v1.2.1: release npm package

08/25/2021

  • feat(no-cursor): add a way to disable magicmouse on an element

02/19/2021

  • Added Modernizr to detect touch screen device

08/19/2020

  • Disabled on mobile

You Might Be Interested In:


One thought on “Creative Custom Cursor Library – MagicMouse.js

  1. Leanne Seary

    Hello! This magic mouse effect is wonderful! Thank you! Being a web designer and not a programmer, I use WordPress with Elementor Pro to design my sites. Could you please explain how to add this code to my Hello! Theme? Thank you!

    Reply

Leave a Reply