Direction Aware Cursor Hover Effect - jQuery springyElement

The springyElement jQuery plugin detects which direction a user enters/exits an element and apply a 'springy' effect to the element on mouse hover.

The plugin also supports touch events. It automatically resets the position of the element when the mouse leaves (or the touch is released).

Based on the CSS translate() transform function. So that the plugin works with the modern browsers which support CSS3 2D transforms.

See also:

• Direction-aware Hover Effect with jQuery SlipHover Plugin
• Direction-aware Hover Effect Plugin For jQuery - focus-follow
• Image Direction-Aware Hover Effect with jQuery and CSS3
• Mouse-aware Sliding Overlays with jQuery and CSS3
• Simple jQuery Direction Aware Hover Animation Plugin - Hover Direction
• Mouse Direction-aware jQuery Hover Effect Plugin - Directional Hover

How to use it:

1. Load the springyElement.js script after loading the latest jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="springyElement.js"></script>

2. Attach the plugin to the target element and done.

<div id="example">
  Element
</div>

$(function(){
  $('#element').springyElement();
});

3. Specify the max distance the element can travel in pixels. Default: 20px.

<div id="example2">
  Element 2
</div>

$(function(){
  $('#element2').springyElement(30);
});

---

This awesome jQuery plugin is developed by justMoritz. For more Advanced Usages, please check the demo page or visit the official website.