Display animation on focus with css and javascript

0

In this tutorial I will be explaining how to display animation on focus with css and JavaScript. All the animation are performed purely using css and to reveal the animation when user focus on the particular section that has the animation uses javaScript. Extremely lightweight and easy to plugin to your application.

View Demo

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.

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.

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

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.

Given below is the list of all the animation class name, try each one of them, they are awesome.

animation class name
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

You must try these animation in your project. It will definitely make your site look cool.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.