Use Animations to Make Your Site More Attractive

Hello!!

Today I will tell your how to add animations on your website to look it more attractive. First off all we should know what is animation in css? Basically t is used when we want text to be animated from website. To make any text animated we use css so it does not effect on page load or page speed. We just attach two files and write a little code for it. You can check animations on https://daneden.github.io/animate.css/ link. It is a online file provided by githud to use animations on your website even they have some links to attach it on your website too but it is not that much easy and sometimes it don’t work. Today I will tell you two features of animate.css. 

1.       Animation.

2.       Animation on scrolling.

1.      Animation : It  just let you animate your text. For example when you open your website your text, div or picture will bounce, Swing or Shake. But the text on which you want to use animation is at the bottom… then it’s a problem for you because animation will work on page load only and it will end when u will reach on the part u want to animate. But its solution I am providing u is Animation on Scrolling.

2.      Animation on Scrolling: It is used when u want to use animation on the bottom of the website. Because animation is on hold until you reach at the bottom or on the part you want to animate in your website.

So here are few steps to use Animations:

1)      Download these Files,

2)      Attach animate.css. For example: <link rel="stylesheet" type="text/css" href="animate.css">.

3)      Now choose the div u want to animate and just write [ class="animated zoomIn" ] For Example: <div class="animated zoomIn" style="margin-top:500px;text-align:center;"><h1>How Are You</h1></div>

4)      Now just Save the page as *.html and run in google chrome.

Steps to use Animation on Scrolling:

1)      Use Upper 3 Steps to Attach Animations.

2)      Attach jquery.js. For example: <script type="text/javascript" href="jquery.js"></script>.

3)      Attach file.js. For example: <script src="file.js"></script>.

4)      Copy This code and paste [<script> new WOW().init(); </script> ].

5)      Now where you attached the class animated zoomIn just write wow with them. For Example : <div class="animated zoomIn wow" style="margin-top:500px;text-align:center;"><h1>You</h1></div>.

6)      Now save the page and run it. Your animations will run on page scroll only.

To Understand more easily watch this video Animations to Make Your Site More Attractive.