Display animation on focus with css and javascript

by  
Share:
Display animation on focus with css and javascript

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.

<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.

<script src="wow.min.js" type="text/javascript"></script>
<script type="text/javascript">
     new WOW().init();
</script>

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
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

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Vikash Kumar Singh on

nice tuts

Reply
Matthew on

Does this still work with the newer version of animate?

Reply
Shahrukh Khan on

I haven’t tried it yet, do let me know.

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.