This is very good advantage to add animations at your website. It look so amazing while animation appears on your screen and user gives a positive feedback. There are so many HTML5 effects are available. Here we will be discussing how to make Animation effects on page appear event that you have seen in a lot of websites. Its a basic CSS animation combined with page appear jQuery event.
First you have to know about following:

  • Make CSS animation.
  • Adding animation effect at CSS.
  • Adding Page appear effect.

LIVE DEMO

 

https://jsfiddle.net/shakalya/kvmjjoa4/

Here is a page Appear script that will give you appear event to any HTML id or class.
You can also have a look to github page
https://github.com/morr/jquery.appear/blob/master/jquery.appear.js

or follow copying below codes to your js file.

Now for using this appear event see the following:

You must add this css

Now add below two classes to the any division and it will be hidden at start and will animate when devision appears on screen.

 

Leave a Reply