magnet-mouse's Introduction

Magnet mouse

Magnet-mouse.js is a JavaScript animation library which allows DOM elements to follow the mouse with many parameters.
It works with DOM attributes, JavaScript Objects and CSS properties.

Getting started | Documentation | Demos and examples

Getting started

Download

Via npm

npm install fluffy-factory/magnet-mouse --save

Via CDN

<script src="https://cdn.jsdelivr.net/gh/fluffy-factory/magnet-mouse@latest/lib/magnet-mouse.min.js"></script>

or manual download.

Installation

3 possibilities to install the plugin :

import
require
or by file include

Import

import MagnetMouse from 'magnet-mouse';

Require

const magnetMouse = require('magnet-mouse');

File include

Link magnet-mouse.min.js in your HTML :

<script src="magnet-mouse.min.js"></script>

Basic usage

let mm = new MagnetMouse({
  magnet: {
    element: '.magnet'
  }
});

mm.init();

For the transition of the element when the cursor hovers it, you must add CSS:

.magnet {
  transition: transform .3s ease;
}

Documentation

Options

{
  magnet: {
    element: '.magnet-mouse', /* Element to magnet */
    class: 'magnet-mouse-active', /* Adds a class when the magnet effect begins */
    enabled: true, /* Enables the magnet effect */
    distance: 20, /* Distance (in px) when the magnet effect around element activates */
    position: 'center' /* Position of mouse relative to the element when magnet effect is active */
  }, 
  follow: {
    element: '.follow-mouse', /* Element that follows the mouse */
    class: 'follow-mouse-active' /* Add class to element that follows the mouse when enter in the magnet effect */
  },
  throttle: 10, /* Time (in ms) between each eventListener calls */
  inCallback: null, /* Callback when mouse enters in the magnet effect */
  outCallback: null /* Callback when mouse leaves in the magnet effect */
}

For position, you have multiple choices :

position: 'center' /* center by default, top-left, top-right, bottom-left, bottom-right, top-center, bottom-center */

When using callbacks, the target element's properties are accessible:

let mm = new MagnetMouse({
  magnet: {
    element: '.magnet'
  },
  inCallback: function (data) {
    console.log(data);
  }
});

Result returns:

{
  elem: {
    height: 58, /* Height of the element (in px) */
    width: 126.65625, /* Width of the element (in px) */
    node: 'div.magnet.one' /* Node of the element */
  },
  xMax: 1106.65625, /* Right position of the element  */
  xMin: 940, /* Left position of the element */
  yMax: 194, /* Bottom position of the element */
  yMin: 96 /* Top position of the element */
}

Methods

init

Initializes Magnet mouse

mm.init();

getPositionElement

Returns the position of each element (same json above)

mm.getElementsPosition();

getPositionMouse

Returns the mouse's position (posX and posY)

mm.getMousePosition(window.event);

destroy

Destroys a Magnet mouse (Removes eventListener and CSS classes)

mm.destroy();

Demos and examples

Mobile and tablet

On mobile and tablets there is no mouse, so the plugin is automatically disabled on these platforms.

Magnet mouse

magnet-mouse's People

Contributors

Stargazers

Watchers

magnet-mouse's Issues

Length is Undefined

Getting this error:

index.js:192 Uncaught TypeError: Cannot read property 'length' of undefined
    at MagnetMouse.magnetElement (index.js:192)
    at index.js:251
    at index.js:57

my code: (React)

// ------
import React, { useEffect } from 'react'
import MagnetMouse from 'magnet-mouse';

// Styles
// ------
import {
    Jacket,
    InnerCircle
} from './styles';

// Component
// ------
const Cursor = () => {
    useEffect(() => {
        let mm = new MagnetMouse({
            follow: {
                element: '.cursor',
                class: 'follow-mouse-active' /* Add class to element that follows the mouse when enter in the magnet effect */
            },
        });

        mm.init();
    }, [])

    return (
        <Jacket className="cursor">
            <InnerCircle />
        </Jacket>
    );
}

export default React.memo(Cursor);

Reduce the pull strength

Hi !

Not an issue, more of a discussion. Is there any way the reduce the pull radius after the mouse enters the magnet radius?

Thank you

Edge - Expected identifier, string or number

Hi, when I'm including this library i get a "SCRIPT5022: Expected identifier, string or number" breaking JavasScript error when testing in Microsoft Edge (not the new Chromium version).

Recommend Projects