anchorHoverEffect is a tiny jQuery plugin that applies fancy CSS3 animations to your anchor links on mouse hover i.e makes you anchor tag fancy and animated. Works on all modern browser which support CSS3 transforms and transitions. Currently, it provides four different types of effects .i.e Roller 3D effect, Flip Effect, Bracket Effect, and BorderBottom effect.
Download: https://github.com/iSatinderSingh/anchor-hover-effect
Demonstration: https://codepedia.info/Anchor-hover-effect-jquery-plugin.html
Plugin homepage: https://codepedia.info/anchor-hover-effect-jquery-plugin/
Implementation:
First, we need to include anchorHoverEffect.css file in our head tag. Then load anchorHoverEffect.js script after loading jQuery library.
<link href="../anchorHoverEffect.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="../anchorHoverEffect.js"></script>Add Html anchor tags whom you want to make it fancy and animated on hover.
<ul class="ulDefault">
<li><a href="#">jQuery</a></li>
<li><a href="#">Angular Js</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Asp.net MVC</a></li>
</ul>Call the function on anchor tag you just added.
$(".ulDefault a").anchorHoverEffect();Options:
| roller3d | String | is set as default, and it makes anchor tag as 3d rolling effect |
| brackets | String | It added left right rectangle brackets at start and end of anchor text with animation. |
| flip | String | It flips the anchor text. |
| borderBottom | String | It adds border bottom with animation. |
Screenshots:
