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
Have fun! ✌️
