Interactive Hover Effect With jQuery - Attract Hover

File Size: 23.6 KB
Views Total: 1606
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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

<script src="" 
<script src="build/attractHover.js"></script>

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


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.

  proximity: 30

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

  magnetism: 3

7. Default CSS classes.

  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.