https://github.com/wpaix/magnethover.js

Dynamic magnet hover JS effect.
https://github.com/wpaix/magnethover.js

effects hover js magnet

Last synced: 5 days ago
JSON representation

Dynamic magnet hover JS effect.

• Host: GitHub
• URL: https://github.com/wpaix/magnethover.js
• Owner: wpaix
• License: gpl-3.0
• Created: 2023-08-04T11:53:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-04T12:07:13.000Z (over 1 year ago)
• Last Synced: 2024-08-02T17:31:52.298Z (3 months ago)
• Topics: effects, hover, js, magnet
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🧲 MagnetHover.js

- JS Magnet hover effect for dom elements

- When cursor is close enough to the element, it will be magnet-pulled towards the cursor, which is always fun

- The element will be a little clingy and once the cursor is taken enough away, the element will snap back in place

- Coded for performance optimized websites, using requestAnimationFrame, event throttling, and dom css transform manipulation and animejs for elastic easing

## 📦 Dependencies

- Anime.js (window.anime) or modify the class to import it

- No jQuery

## 🧑🏼‍💻 Usage

let magnet = new MagnetHover({ document.querySelector('#myElement') })

- Param: hoverScale defaults to 1.15

- Param: pull defaults to .4

- Method: magnet.unlisten() to turn off, and magnet.listen() to turn on again

- Destroy: To destroy, use above unlisten method, or and maybe the var and dom element, as that will have listeners garbage colledted away nicely