This time I will share jQuery Plugin and tutorial about Interactive Hover Effect With jQuery – Attract Hover, hope it will help you in programming stack.
Attract Hover is a jQuery plugin that applies an interactive hover effect to any element using CSS3 transitions and transforms. This element will move smoothly with your mouse within a boundary.
How to use it:
1. Insert an element into a container element.
2 |
<a href="#" class="example"> |
2. Insert jQuery library and the jQuery Attract Hover plugin into the document.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
5 |
<script src="build/attractHover.js"></script> |
3. Call the function on the element to enable the hover effect.
1 |
$.attractHover('.example'); |
4. Apply a CSS easing to the hover effect.
1 |
.attract-hover-easing { |
2 |
transition: all 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940); |
5. Specify the area around the element (in pixels) that starts the interaction.
1 |
$.attractHover('.example',{ |
6. Specify how far the element can move based on the mouse position.
1 |
$.attractHover('.example',{ |
7. Default CSS classes.
1 |
$.attractHover('.example',{ |
2 |
attractClass: 'attract-hover', |
3 |
attractEasingClass: 'attract-hover-easing', |
4 |
attractAttractedClass: 'attract-hover-attracted' |
This awesome jQuery plugin is developed by bymayo. For more Advanced Usages, please check the demo page or visit the official website.
