The animateClick plug-in
In this tutorial, I am going to show you how you may create animations as specified elements like a button is clicked. For example, as you click create account button, you can show an animation of “Tick” to confirm users that account is created.
Similarly, for a failed operation upon clicking a button or link, the cross animation can be displayed to symbolically present the failed status.
For that, I am going to use a nice jQuery plug-in, animateClick, which was developed by Arun Thomas and is available for downloading here.
In this example, as you click the “button” which is basically a link tag, the tick animation with green color will display. See the demo online by clicking the link below:
See online demo and code
Follow these steps for creating the animation as a “button” is clicked:
First of all, include the jQuery library in the <head> section:
<script type=”text/javascript” src=”js/jquery-1.12.0.min.js”></script>
After that, include the animateClick.js file, that you may get from the downloaded package from GitHub website or by right clicking the demo page, view source, and saving the animateClick.js file in your system.
<script type=”text/javascript” src=”js/animateClick.js”></script>
You also need to include the CSS file that comes with the package:
<link rel=”stylesheet” href=”css/main.css” />
Inside the script section, write the code of animation:
<script>
$(document).ready(function() {
$('#tickanimation').animateClick({
"color":"green",
"animation":"tick"
});
});
</script>
The markup section is just a link with specific classes:
<a id=”tickanimation” class=”button” href=”#”>Tick Animation</a>
That’s it.
Creating a cross animation
In this example, a cross animation is displayed as you click the link with button style. See the demo online:
Complete code:
<!DOCTYPE>
<head>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/animateClick.js"></script>
<link rel="stylesheet" href="css/main.css" />
<script>
$(document).ready(function() {
$('#crossanimation').animateClick({
"color":"red",
"animation":"cross"
});
});
</script>
</head>
<body>
<div style="margin-top:50px;">
<a id="crossanimation" class="button" href="#">Cross Animation</a>
</div>
</body>
</html>
For creating cross-animation, you simply need to change the values in the script section. For cross animation, I just changed this:
$('#crossanimation').animateClick({
"color":"red",
"animation":"cross"
});
In the animation parameter, you may specify different available animations like in above example I used “tick”. In this example, I used “cross”. Similarly, you may use the default, signal and shoot as well.
See example below with other animations and different colors.
Using signal, shoot and default animations
See the example online where I used the default, signal and shoot values for animation parameter.
Code:
<!DOCTYPE>
<head>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/animateClick.js"></script>
<link rel="stylesheet" href="css/main.css" />
<script>
$(document).ready(function() {
$('#def').animateClick({
"color":"black"
});
$('#signalanimation').animateClick({
"color":"grey",
"animation":"signal"
});
$('#shootanimation').animateClick({
"color":"lightblue",
"animation":"shoot"
});
});
</script>
</head>
<body>
<div style="margin-top:50px;">
<p><a id="def" class="button" href="#">Default Animation</a></p><br /><br />
<p><a id="signalanimation" class="button" href="#">Signal Animation</a></p><br /><br />
<p><a id="shootanimation" class="button" href="#">Shoot Animation</a></p>
</div>
</body>
</html>
See the complete code in the demo page code panel.
An example of animation with span tag
As mentioned earlier, not only you can create animation with links or buttons but other HTML elements as well. In this example, I am using a <span> tag for the tick animation.
As you click the span tag’s text, the tick mark will display with animation.
Markup and script:
<!DOCTYPE>
<head>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/animateClick.js"></script>
<link rel="stylesheet" href="css/main.css" />
<script>
$(document).ready(function() {
$('.spananimation').animateClick({
"color":"yellow",
"animation":"tick"
});
});
</script>
<style>
.spananimation{
width:200px;
color:#fff;
border-radius:15px;
padding:15px;
background-color:#4B2525;
}
.spananimation:hover{
background-color:#DEBCBC;
color:rgb(51,51,51);
transition:ease-in-out .5s;
}
</style>
</head>
<body>
<div style="margin-top:50px;">
<span class="spananimation" >A demo of Span Tick Animation</span>
</div>
</body>
</html>
The CSS class of span tag is created in the style section. Similarly, you may create animations for paragraph or div tags as well.