The animation for the sections when they are displayed and uh in this video we will add the animation to the elements of our website so let's get.
started now for making the process of adding animation easier we're going to use this Library called AOS animate on.
Scroll so you can just search for animate on scroll and uh go to this link right here so this is the library right here and if you scroll down we can see the demo of the library so we just need.
To add this dat data attribute and then we need to add the animation name and it will have the animation so here we can see we have different types of Animation we have.
Animations in your websites so let's scroll down and here we can see we have the CDN links so let's copy the CDN of CSS and let's go to source code and let's go to the HTML.
File and let's paste it over here inside the head section right now let's go back and let's copy this JavaScript so let's copy the script tag from here and let's scroll down and let's paste it over here.
Just before the body ends so I just paste it over here and now if you go back here we can see that we also need to initialize the AOS Library so let's copy the script tag from here and let's.
Paste it over here and we can also add different options over here so I'll just add the duration so let's set the default duration to let's try 800 and you can find all the.
Options in this uh documentation of the library so you can just go over here to view on GitHub and uh here if you scroll down here we can see all the options are displayed over here so you can use any.
- How To Design An Onboarding Screen Using HTML, CSS & JavaScript - Part 1 BlogSpot
- 6 Year timeline Infographics - ***FREE DOWNLOAD**
- How To Make Your Blogger Website Load Faster
Of these options in your library so we - ID Card Make
Have used the duration option you can use all these other options over here all right now let's go ahead and start with adding the.Animation so the first thing we will do is we will add the animation to this Services section so here we can see when we scroll down we have the animation over here for each of the different.
Services now if you go back to our source code and if you go to the HTML of the services section so here we have the services section now here we can see we have the.
Container division but the services are added dynamically using JavaScript so let's go to the JavaScript code and let's scroll down and here we have the code for adding the services so this is.
The HTML code now let's add the data attribute over here for the icon so this is the icon division so let's type data hyphen AOS equals and let's add the animation flip left and then for the.
Service content let's add an animation I'll just Ty data AOS equals and let's add the fade in animation right now let go ahead and uh take a look at our design so if you.
Scroll down we can see that the animation is working right now let's go ahead and add the animation for this about section so let's go back.
To our HTML file and uh this is the content of the about section now for the image we need to add an animation so let's T data AOS equals and for the image let's add an.
Animation called fade right and then for the right section let's add an animation so let's Ty data AOS and let's add the animation fade in right now let's save this and now if you.
Scroll down we can see that the
Animation is working all right right now we need to add the animation for these blog posts so so let's scroll down and even for the block.Section we have the data added by the JavaScript so let's go to the JavaScript code let's scroll down and uh here we have the HTML of the blog card now here we need to add the animation to the card.
Division now this is all the content that we need to have inside the card so here for the card let's TAP card do set attribute and here let's type data hyphen.
AOS and for the value let's tap fade in and now let's see whether this works so let's scroll down and we can see that the animation is working all.
Right so that's basically it with the animation of our website you can add the animation to this contact Section and the footer as well so you can follow the same process and do it for all the other.
Sections all right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this.
Channel to get the latest video updates thanks a lot for watching have a nice day a.
