attract-hover
v1.0.0
Published
Creates an 'attract' effect, when the mouse is near an element and within bounds.
Downloads
815
Readme
Attract Hover
Creates an 'attract' effect, when the mouse is near an element and within bounds.
Requirements
This plugin currently requires jQuery 2.x+, but we'd recommend using jQuery 3.x+.
Install
You can install via npm
:
npm install attract-hover
Or, manually by copying the attractHover.js
from /dist/
and placing it inside your project folders.
Initialise
To initialise the plugin, use the code below in your JS file.
$('.js-attract-hover').attractHover();
Then add the selector to the element you want to have the attract effect to.
<a href="/" class="js-attract-hover">
Button
</a>
Options
You can overwrite the plugin options e.g. $('.js-attract-hover').attractHover({ proximity: 10 });
. The options for the plugin can be found below:
CSS / Easing
Although theres no need to add any CSS / easing to your elements as the attract hover adds CSS itself dynamically. We recommend adding some form of transition and easing to make the attract effect seem more elastic.
This is best added to the .attract-hover-easing
in your own CSS (Unless you've changed the attractEasingClass
option on the plugin.)
.attract-hover-easing {
transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
Roadmap
- Vanilla version
- More debugging in browsers and devices