marianmoskal / magnetic-hover

magneticHover lets you trigger the hover effect on the element when the cursor is near it, but not over it yet

magneticHover

magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet.

Examples

https://codesandbox.io/s/elegant-bogdan-eupvp?file=/src/index.js
https://codesandbox.io/s/competent-kare-tnx6t?file=/src/index.js
https://codesandbox.io/s/friendly-tdd-pdyw3?file=/src/index.js

Installation

npm install --save magnetic-hover

Usage

import MagneticHover from "../js/magneticHover";

// find target element
const elem = document.getElementById("box");

new MagneticHover({
  element: elem,
  radius: 122,
  callback: (distance) => {
    // get the distance from the cursor to the target element
    console.log(distance);
  },
});

Settings

• element - DOM element
• radius - how far from the target element callback should be triggered
• callback - function that's gonna be triggered once cursor is over the range between radius and target element

Status and contribution

The project is supported by Halo lab development team, we're not working on it regularly, but trying to invest in it when we have time between clients' project.
Though, feel free to open issues and you're very welcome to contribute.