Direction Aware Cursor Hover Effect - jQuery springyElement

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

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.