🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

anchorHoverEffect is a tiny jQuery plugin that applies fancy CSS3 animations to your anchor links on mouse hover.

text-animation

Documentation

anchor-hover-effect

Anchor Hover Effect is a jQuery plugin, which makes an anchor tag fancy and animated. Currently, it provides four different types of effects .i.e Roller 3D effect, Flip Effect, Bracket Effect, and BorderBottom effect.

Doc: http://codepedia.info/anchor-hover-effect-jquery-plugin/

DEMO

Look at the demo section on http://codepedia.info/Anchor-hover-effect-jquery-plugin.html to see anchorHoverEffect in action.

How to use it:

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:

Currently, there are four different types of effect.

  • roller3d : is set as default, and it makes anchor tag as 3d rolling effect
  • brackets : It added left right rectangle brackets at start and end of anchor text with animation.
  • flip : It flips the anchor text.
  • borderBottom : It adds border bottom with animation.

License: MIT


You May Also Like