Skip to content

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

Notifications You must be signed in to change notification settings

Halo-Lab/magnetic-hover

Repository files navigation

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

Word from author

Have fun! ✌️

Supported by Halo lab

About

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

Topics

Resources

Stars

Watchers

Forks