https://github.com/Halo-Lab/magneticHover

magneticHover lets you trigger the hover effect on the element when the cursor is near it, but not over it yet
https://github.com/Halo-Lab/magneticHover

effects js promo

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Halo-Lab/magneticHover
• Owner: Halo-Lab
• Created: 2020-04-10T14:04:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:38:14.000Z (almost 2 years ago)
• Last Synced: 2024-06-02T02:44:35.611Z (5 months ago)
• Topics: effects, js, promo
• Language: JavaScript
• Homepage:
• Size: 874 KB
• Stars: 39
• Watchers: 3
• Forks: 4
• Open Issues: 13
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

• fucking-awesome-web-effect - magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet (🚀 A series of exquisite and compact web page cool effects / Mouse Effect)
• awesome-web-effect - magneticHover - magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet (🚀 A series of exquisite and compact web page cool effects / Mouse Effect)

README

        
# 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! ✌️