How to add animation effect
First of all, credits to the author of these plugin, they did an awesome job that saves our day.
Animate.css – Daniel Eden
Wow.js – Matt Aussaguel
Download the animate.css from github or you can download a working solution at the end of this tutorial.
Attach the css file to your page.
<link rel="stylesheet" href="animate.css" type="text/css" />
Now add the animation class name to your div, span or image, anything you want. For example let me add a bounce animation to a div container. Add animated plus the animation class name to it.
<div class="animated bounce">this is a sample text</div>
By adding the above class, the animation will work only once. Now take a situation where you want to animate something infinite times (goes on and on and on). Just add infinite class name to the same div
<div class="animated bounce infinite">this is a sample text</div>
Display or reveal the animation on focus
Take a situation where you want to animate an image that is at the bottom of the page. So after the page loads, the animation is already performed and you will just see the static image. But you want to see the animation effect only when image comes on focus or when the user scroll down the page and actually see the image. Don’t worry we have a solution and it’s called wow.js and it’s awesome.
Attach the wow.js file to your page and create an object.
Using the earlier div that perform the bounce animation. Just add the class wow and its done.
<div class="wow animated bounce">this is a sample text</div>
Given below is the list of all the animation class name, try each one of them, they are awesome.
|animation class name|
You must try these animation in your project. It will definitely make your site look cool.