magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet.
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
npm install --save magnetic-hover
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);
},
});
- 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
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.