The animateClick plug-in
In this tutorial, I am going to show you how you may create animations as specified elements like a button are clicked.
For example, when you click create account button, you can show an animation of “Tick” to confirm to users that an account has been created.
Similarly, when an operation fails upon clicking a button or link, the cross animation can be displayed to symbolically present the failed status.
An example of showing Ticked animation in a button link
In this example, as you click the “button” which is a link tag, the tick animation with a green color will display.
See the demo below:
Follow these steps for creating the animation as a “button” is clicked:
First of all, include the jQuery library in the <head> section:
After that, include the animateClick.js file, that you may get from the downloaded package from GitHub website.
You also need to include the CSS file that comes with the package:
Inside the script section, write the code of the animation:
<script>
$(document).ready(function() {
$('#tickanimation').animateClick({
"color":"green",
"animation":"tick"
});
});
</script>
The markup section is just a link with specific classes:
That’s it.
The 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() {
$('#tickanimation').animateClick({
"color":"green",
"animation":"tick"
});
});
</script>
</head>
<body>
<div style="margin-top:50px;">
<a id="tickanimation" class="button" href="#">Tick Animation</a>
</div>
</body>
</html>
Creating a cross animation
In this example, a cross animation is displayed as you click the link with button style.
See the demo:
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>
To create the cross-animation, you 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 as in the above example I used “tick”. In this example, I used “cross”. Similarly, you may use the default, signal and shoot as well.
See the example below with other animations and different colors.
Using signal, shoot, and default animations
See the example below where I used the default, signal, and shoot values for the 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>
An example of animation with a 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 the span tag is created in the style section. Similarly, you may create animations for paragraph or div tags as well.