The animateClick plug-in
In this tutorial, I am going to show you how you may create animations as specified element 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 for symbolically presenting failed status.
For that, I am going to use a nice jQuery plug-in, animateClick, which is 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:
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 or by right clicking the demo page, view source, and save the animateClick.js file in your system.
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:
The markup section is just a link with specific classes:
<a id=”tickanimation” class=”button” href=”#”>Tick Animation</a>
Creating a cross animation
In this example, a cross animation is displayed as you click the link with button style. See the demo online:
For creating cross animation, you simply need to change the values in the script section. For cross animation, I just changed this:
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.
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.
The CSS class of span tag is created in the style section. Similarly, you may create animations for paragraph or div tag as well.