Anchor hover effect jQuery Plugin [3D effect]

/ / 0 Comments

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. This is simple plugin which gives your anchor tag cool animated effect.

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. Our markup looks like as shown below:

<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 we 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>

Now call anchorHoverEffect() function on anchor tag we just added to our it animated.

$(".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

Download From GitHub: Anchor-hover-effect

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to do a favor, then Buy me a coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

0 Comments