This time I will share jQuery Plugin and tutorial about jQuery Plugin For CSS3 Animated Anchor Links – anchorHoverEffect, hope it will help you in programming stack.
anchorHoverEffect is a tiny jQuery plugin that applies fancy CSS3 animations to your anchor links on mouse hover. Works on all modern browser which support CSS3 transforms and transitions.
How to use it:
1. Load the core style sheet anchorHoverEffect.css
in the head
section of the html document.
1 |
< link href = "anchorHoverEffect.css" rel = "stylesheet" > |
2. Load the latest version of jQuery library and the jQuery anchorHoverEffect plugin’s script at the end of the document.
1 |
< script src = "//code.jquery.com/jquery-2.2.4.min.js" ></ script > |
2 |
< script src = "anchorHoverEffect.js" ></ script > |
3. Call the function on the anchor links and you will see a fancy 3D roller effect on mouse hover.
2 |
< li >< a href = "#" >jQuery</ a ></ li > |
3 |
< li >< a href = "#" >jQueryScript</ a ></ li > |
4 |
< li >< a href = "#" >ReactJS</ a ></ li > |
5 |
< li >< a href = "#" >React Native</ a ></ li > |
4. The plugin currently comes with 4 fancy CSS3 animations. You can add your own CSS3 animations as you seen in the anchorHoverEffect.css
.
1 |
$( ".demo-1 a" ).anchorHoverEffect(); |
2 |
$( ".demo-2 a" ).anchorHoverEffect({type: 'brackets' }); |
3 |
$( ".demo-3 a" ).anchorHoverEffect({type: 'flip' }); |
4 |
$( ".demo-4 a" ).anchorHoverEffect({type: 'borderBottom' }); |
About Author:
Author: Satinder Singh
Website: http://codepedia.info/anchor-hover-effect-jquery-plugin/
This awesome jQuery plugin is developed by iSatinderSingh. For more Advanced Usages, please check the demo page or visit the official website.