Press "Enter" to skip to content

Simple and Lightweight Custom Cursor With Javascript | MagicMouse.js

MagicMouse.js is a JavaScript library to create some stunning mouse (cursor) effects on your website. Magic Mouse is a customized cursor library to create a cool, interactive cursor with a circle that follows the mouse pointer.

custom cursor js, javascript change cursor to image, javascript cursor types, custom cursor css, custom cursor js library, mouse cursor effects javascript

How to make use of it:

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>

Initialize the MagicMouse.js with default options.

magicMouse();

Hide the system cursor if wanted.

html,* { cursor: none; }

Customize the cursor impact.

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

Disable the outer circle.

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

Use the default cursor as an alternative.

magicMouse({
  "defaultCursor": true
});

Set the scale of the outer circle.

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

Configuration list (updating):

Variable nameValue
cursorOuterDefault: “circle-basic”, other options : “disable”
hoverEffectdefault: “circle-move”, other options : “pointer-blur”, “pointer-overlay”

Creative Custom Cursor Library, Free Cursor Effects, Mouse swipe javascript, javascript change cursor to wait


See Demo And Download

Official Website(dshongphuc): Click Here

This superior jQuery plugin is developed by dshongphuc. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.