HTML links and jQuery
The simple HTML links are flat, static and boring. You may add colors to the links by using CSS/CSS3 properties. What about adding some animated effects to those anchor tags of HTML?
While simple links may look good in certain niche websites like financial, political / NEWS etc. The animated links can be used in funky websites like gaming, mobiles etc. while simple animation can also be used in “serious” niche websites as well.
In this tutorial, I am going to show you examples of a jQuery based plug-in that you may use for creating the HTML links with four types of effects. The plug-in can be downloaded from the Github website here (zip file with plug-in package). You may also get the required JS/CSS files of the plug-in by view source the demo pages below.
A demo of 3D effect with rolling in HTML links
In this example, a few anchor tags are used for creating the links with rolling 3D effect. Have a look at the demo and code:
See online demo and code
In order to set up this plug-in to be used for your project, simply download the package and get the JS and CSS files. Place those at your desired location and refer the CSS file in the <head> section and JS file just above the </body> tag:
The CSS file:
<link href=”css/anchorHoverEffect/anchorHoverEffect.css” rel=”stylesheet” type=”text/css”/>
The JS files of jQuery and plug-in:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”> </script>
<script src=”js/anchorHoverEffect/anchorHoverEffect.js” type=”text/javascript”></script>
In the markup section, a few links are created with certain CSS classes that are also placed in the <style> section:
<div id="demo-of-roller3d"> <h4 style="float: left;"> A demo of animated links</h4> <ul class="ulDefault"> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap</a></li> <li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li> <li><a href="https://www.jquery-az.com/python-tutorials/">Python</a></li> </ul> </div>
Finally, the jQuery code for initiating the animated links. There you may specify different values for the type option in the anchorHoverEffect method. For this demo, the type: “roller3d” is used:
<script type="text/javascript">
$(document).ready(function () {
$("#demo-of-roller3d a").anchorHoverEffect({ type: "roller3d" });
});
</script>
The following examples show different values available as using this anchor animation plug-in.
A demo of flip effect links
In this demo, the type option’s value is set as “flip” for link effect. See the code and output by clicking the links below:
See online demo and code
The following is the script used in above example:
<script type="text/javascript">
$(document).ready(function () {
$("#demo-of-flip a").anchorHoverEffect({ type: "flip" });
});
</script>
Creating link of HTML with brackets effect
In this example, the links are created with brackets effect. As you bring the mouse over any link, the square brackets will appear with an animation. Have a look:
See online demo and code
The script:
<script type="text/javascript">
$(document).ready(function () {
$("#demo-of-brackets a").anchorHoverEffect({ type: "brackets" });
});
</script>
An example of links with bottom border with animation
Use the type: “borderBottom” option in the jQuery section for creating links with a border that comes with an animation effect to the specified links:
See online demo and code
The script part is:
<script type="text/javascript">
$(document).ready(function () {
$("#demo-of-borderBottom a").anchorHoverEffect({ type: "borderBottom" });
});
</script>