This time I will share jQuery Plugin and tutorial about Smooth Interactive Hover Effect – Twitch.js, hope it will help you in programming stack.
Twitch.js is a fancy responsive jQuery plugin which applies a smooth, interactive hover effect to any element based on the mouse position on mouseover and mouseout.
The smooth hover effect is based on CSS3 transitions.
How to use it:
1. Import the jquery.twitch.js
into the document, after the latest jQuery library.
2 |
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin = "anonymous" ></ script > |
4 |
< script src = "jquery.twitch.js" ></ script > |
2. Call the function on the target element.
1 |
< img class = "demo" src = "1.jpg" alt = "" > |
3. The element must have a position
property.
4. The plugin also works with overlapping elements. You can specify the number of layers in the JavaScript. (Default: 0. Up to 4).
5. Set the distance the element should move on mouse hover.
6. Set the transition speed.
7. Specify the position type of the element.
4 |
positionType: "absolute" |
This awesome jQuery plugin is developed by klynicol. For more Advanced Usages, please check the demo page or visit the official website.