Interactive Hover Effect With jQuery - Attract Hover

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.

<div class="boundary">
  <a href="#" class="example">
    Element
  </a>
</div>

2. Insert jQuery library and the jQuery Attract Hover plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="build/attractHover.js"></script>

3. Call the function on the element to enable the hover effect.

$.attractHover('.example');

4. Apply a CSS easing to the hover effect.

.attract-hover-easing {
  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.

$.attractHover('.example',{
  proximity: 30
});

6. Specify how far the element can move based on the mouse position.

$.attractHover('.example',{
  magnetism: 3
});

7. Default CSS classes.

$.attractHover('.example',{
  attractClass: 'attract-hover',
  attractEasingClass: 'attract-hover-easing',
  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.