jQuery MasterClass - with Website Animations

1. Introduction: Welcome to the ultimate jQuery course. In this course, you will learn everything about jQuery, how to add animation using jQuery, how to call API using Ajax, and much more African reading this course, you can immediately start using jQuery for your websites. And you will learn this amazing animation tricks, which nowadays modern websites have. I very excited about this course and hope you are too. Let's dive into this. 2. 01 What is jQuery: So what is jQuery? Jquery is lightweight JavaScript library for it easily access DOM elements and add action to it. Some dialogue where it says jQuery is right less and do more type of thing. In simple words. Jquery is the shortcut way to write JavaScript code. Example. If we wanted to add a click event listener for one button, then you can write the same code with jQuery in single line. That's the power of jQuery. Jquery library has many features like DOM manipulation, style manipulation, event listeners, effects, animations, Ajax for making HTTP request and much more. There are a lot of JavaScript libraries, but jQuery is the most popular and best library for JavaScript. And if you are working on almost any website projects, jQuery is very useful for that. There are many big companies reduce jQuery for their websites, like Netflix, Google, Microsoft, Reddit, Stack Overflow, and many more. So after learning jQuery, you can add jQuery in your tech stack. That will also help you in getting the job or become a better web developer. 3. 02 Setting up environment: Let's quickly set up our environment for this course. In the description box, you'll get resources zip file, downloaded and unzipped it. In this Resources folder, you get this jQuery starter folder, open that, and open that folder in VS Code. Now here is a one index.html and one script.js file. I link this script.js file with our HTML file. So let's run this HTML file with live server. So we don't need to repress our browser what each time? If you don't have this extra inch and then I suggest you to install that acceleration. Now let's open the console and see it's working. 4. 03 How to install jQuery: Now first of all, let's see how to add jQuery, HTML, CSS, and JavaScript project. So there are two ways to add jQuery in our project. We can download the jQuery file. How to begin to use CDN link. You can use whatever you want to. It's totally up to you. First of all, let's see how to download the jQuery file. Head over to jquery.com and click on this Download jQuery button. Now, if we want to see code means what is inside the file, then click on development jQuery version. And if you don't want to see that core, then you can use compress jQuery version. Both chords are same, but the difference is compressed version file is smaller than the development version file because in glomerulus or zones, they remove all unnecessary spaces. So that's why we can't read code in that file. I copy here compress person scored. In VS code. We create new file called jQuery dot js and paste that code into that file. Save this and now into our HTML file in the end of body. And before or the script tag, we add one more script tag. And source, jQuery dot js. And that's it. We install our jQuery. Now, let's see the second way, which is the most simple and easiest way. Back to our browser. And scroll down on this page at other CDNs section. Here we get Google CDN. Click on it and copy this latest a3x neighborhood. Now back to VS Code and uncomment out this script tag. And after that, base that CDN link. If you don't want to use post way, then you can remove this oldest script tag. I will keep that for your reference. And that's it. We successfully installed jQuery in our project. 5. 04 Syntax of jQuery: So as I told you, jQuery is very useful to access DOM elements and performing actions for them. So here is a basic syntax of jQuery. What access DOM elements don't confuse about that. It is really very simple. Let me show you the syntax has three main parts. First one is this dollar. Dollar is assigned to access jQuery from CDN. Download that jQuery file locally. After that, we have selector, which is used to define the element or elements, e.g. rewrite dollar p. Then it will select all paragraph element in our HTML file. And at last, we have action, which is the action we want to perform. What example here we simply add hide. Hide is the action we want to perform for all paragraph elements. So just this piece of code hides all paragraph elements on our web page. You can see how simple and easy to hide all paragraph elements. So that site developers and big companies like jQuery so much. 6. 05 Selectors in jQuery: Selectors are very important part of jQuery because it is used to select HTML elements from web page based on their tag name, last name, ID, attributes, and attributes value. Let's see how we can do that. Practically. What Stovall in index.html file, we add one paragraph tag inside it. Just add random text with Laura and phi at the beginning, paragraph one. Now I duplicate this paragraph two more times and change this to paragraph to paragraph T. Cells these and take a look. We have three paragraphs. Now in script.js file rewrite jQuery excess variable, which is dollar. And then in parentheses, we add B in double-quotes. Now edad, we have to add action, let's say hide. So you know what will happen when we save the file? Write your answer in the comment box so I can see how many people are learning with me. Now save this. And C are all p tags or hide. So that's how we select all paragraph elements. If we write here H1, that will select all H1 tags from webpage. Now in the HTML file, I add glass in the second paragraph called a second. Now integrity, I WAS of P. We add dot second. This will select all elements which are glass second, which is our second paragraph. Save this and see our second paragraph is now hidden. If we add here P dot second, then it will select all paragraphs which class name is second. It works similar to CSS selectors. Now for the third paragraph, id, third. Now can you guess how we can select elements by their ID? If we use dot per class name, then we use here has ID. Simple as that. Right? Has third. Fill this and take a look. Paragraph with id third is hidden. You can see how easy it is to select elements in jQuery. In JavaScript, we have to write document dot get element by class name or by ID. Now there are many customs selectors in jQuery. I don't want to bore you by so each selector individually. So here is a table of selectors, and in the description column, you can read its description. It is very simple and easy. If you have some doubts, then you're going to ask me in the comments section. 7. 06 Events: So events are very important part of any web page. It is basically a response for the user's actions. By example, on YouTube website, you press F to see video in full screen. Click on Play button to play the video. So this pressing G and Gleick at events. So there are four types of DOM events available in jQuery. Mouse events, keyboard events, bond movements, and document. What do we do events? So let's suppose Jack Miles urines. Note that I'm not showing you all events because it's a little bit boring and time consuming. We will see events which are commonly useful for us. If we want to check all events, you can check official documentation. So first event is click HTML file. I add one button, Let's say hide. And give this an ID called btn hide. Now here what I want to do is when we click on this Hide button, we want to hide this second paragraph in the script.js file. We first select the Hide button. So dollar has btn underscore height. Now here we add dot and click event. Now in this Click method, we have to add callback function, which will run on this click event. So function. And inside this function, rewrite dollar. Second dot hide. Basically this expression means when you click on this btn Hide button, then run this function. And that function will hide the second paragraph. Save this, and take a look. Click on Hide button. And paragraph two is hidden. You can see how simple it is to add a click event. Now for mouse, we have this many events. You can write them by yourself. Now keyboard has only three events. Key press N key down. Here on this webpage. When I press Esc key, then this second paragraph will hide. And then if we press ascii, then the second paragraph will visible. So for that, we add here dollar and parenthesis. Now on which element we want to add this key event. We want to add this event on full web page. So I add here body now dot key down. And we pass here function. Now our task is to identify if user press H key or ascii. If you do that before in that script, then you know, everyone has its event object. And we get that event object as the parameter of this callback function right here, event. And this event has mattered called the beach, which will return the ascii value of k. What are we going to use your event dot core, that will give us the key name. But I like this, which matter? So simply write console.log event, which this and press edge. See it. So 72, which is the ascii value of edge, and then press S and it returns a T3. So back to our script file. We add here condition if event dot which equals to 72, 10-dollar. Second. Hide. After that, we add one more live event, dot v equals to a T3. Then dollar. Second shoe, sale days and Degas look edge and its height and press S and it's visible. See how easy it is with jQuery. Now what if I WAS of d down? We add up these and take a look. Now I press Esc key and I don't realize it. Now, I realize it. And paragraph is hidden. So when we press the key and after realizing it will run for 99% of time, we will use only key down event for keyboard. Now, we have Guam events, which is very useful when we are working with form. So the syntax of all events are the same for every event. Washed, you have to define a selector and then dot event name, and then add callback function, which will run on that action. Simple as that. You're going to write these events by yourself. If I explain this, all events one-by-one than this tutorial will not complete in 2 h. So try it by yourself. And if you have some doubts, then you're going to ask me in the comments section. 8. 07 Hide & Show effects: Hide and show method is already we have seen in last lesson, these are the easiest way to hide and show the elements on our web page. Now in the hide and show method, we can also specify the time for completing that action. Let's say we want to hide this paragraph into seconds. This height function. We pass your time in milliseconds, which is 2000. And Taylor. When we click on this button, then it takes 2 s to hide. Here we can also buys the callback function for this height effect, which will run after this effect will complete. Let me show you what I mean. So after time, I pass your callback function. And inside this callback function, iodide console.log task completed. This. And now I click on this Hide button and see how our animation is completed. Then this class completed sprint in console. In that callback function, we're going to hide other elements also, which will hide after reading this animation. Now that R1 more impact is toggled. Side chains, this high defect to toggle. And also in HTML file, change the button text to toggle this and take a look. So when we click on this toggle button, if our paragraph is visible, then it will hide. And if it's not visible, then it will show simple as that. Now, before we go to next topic, I wanted to give you one very important tip for jQuery. So whenever you use jQuery or JavaScript, write your code in document.ready function. This function will make sure our full content are loaded. So in jQuery, we can write dollar document dot ready. And inside this we pass function returns after our document is ready. Why do again died dollar function? This is the shorthand for document.ready. But I like to write this first one because if after someday I didn't do this chord, then I might forget about this sorting. But you can use whatever you want to. It's totally right. Now. More all code inside this function. Perfect. 9. 08 Fade & Slide effects: In jQuery, we have four types of defects which are used to pay the visibility of element. Fade-in, fade-out, toga and V2. Now, these effects are pretty easy. Readout is used to fade out element. Let me show you at the place of this toggle effect. I just add fade out anymore these arguments for this. By the way, if we don't remove them, it will also work because it's arguments are almost word for all effects. Save this and take a look. Click on this button. And Z, the second paragraph is fade out. Now fading is for fading effect. And fade toggle is pretty useful for toggle fading effect. At the place of this fade-out, we add fade toggle. So these, and take a look, click on, click on button and say period out. And fading effects are running. Now for it to Effect is used to handle fading value, which is 0-10 means zero opacity, and one means full opacity. Here, right? Fit two. In the function, we have to first pass period of that effect, which is, let's say slow. And then we pass opposite D, which is, let's say 01 phi. Save this and take a look, click on button and see paragraph is how visible. Now, let's talk about side effects that are only three slide effects. Let's see All Effects at once. So I just replaced this fade effect. Those slide toggle. Enable this argument. Save this, and take a look. Click on this button and see first slide up, and then it will slide down. Here. You can also pass speed in milliseconds, slow or fast. This slide toggle really useful for sidebar effect. 10. 09 Animate Method: Now let's talk about the animate method in jQuery. Animate with her is used to create custom animations. That method has all the same properties like other effects, speed and call back. But in any rate, we have to pass object of CSS properties. The first argument, let me show you. Here. I add one deal with glass box and add some dummy text here. And I want to add some styles for this box. So after title, we add style tag. And for box, we add weight 200 pixel, height to 100 pixels. Background color to dark matter. Save this and take a look. See, we get stomata box. Now, when I click on this button, I want to change this box width, height, and font size of this text. So for that, we use animate property. So let's remove this effect. Right here. Dollar dot box dot animate. Now at the first position, we have to pass object of CSS properties. We want to chain. So add object. And first we want to change bit Garland in double-quotes, 200 pixels. Now to add multiple properties, we have to use comma, just like we do in JavaScript object. Now height to 200 pixels, coma. Now if we have property name into words like one size, then we have to convert that in CamelCase, sodium move these deaths and make this as capita. And 20 pixels. Save this and take a look. Click on this button and see width, height, and one size is changed. Now sometimes we want to add 200 pixel in the current width. We can also do that in this method. Here. Iodide plus equals to 200 pixels. Save this and see we get increased 200 pixel in current debate. Now as other effects, we can also pass here speed and callback function. So here I write slow. Fill this, and take a look and see. We get this little animation. 11. 10 Modify HTML with jQuery: In-degree, we have some methods to manipulate DOM elements. We can choose the text, what HTML elements, since that attribute values, etc. So there are three methods for that. Dot text, which is used to get or set the text content of selected elements. Dot HTML, which is used to get our set, the content with HTML markup of selected elements. Well, which is used to get or set the value of form fields like input, text, selected, checkbox value, et cetera. Let's see that practically here. I want to get the text of the second paragraph. In the button click. I just tried dollar. Second dot txt. Then grab this with the console dot log field agendas and take a look. Click on this button and z, the text inside of this second paragraph. Now we can also set the text whatever we want in this second paragraph for that height right here, dollar second dot text. And here in this text matter, I just pass another text like this is jQuery Tutorial. Those agendas. And see, when we click on this button, text will change. Now we have a second method called HTML, which is very similar to this text method. So in the second paragraph, I just add here bold tag. This paragraph two. Now in this script.js file, I duplicate this console line and replace this text with HTML. This, and click on this button. Sorry, we have to comment out this line. Now the file and see here we get the text with HTML elements. So tax method will return only the text. And STR method return the text with HTML elements. Simple as that. Now can you guess how we can set the HTML? As we said, the text, right? We just write here as HTML. And poor conformation. I add here m tag. What emphasize this? And z, we get text in Italian. So this is pretty easy. Now what if I want to get the value of HTML element? Let's say this button. Here. Iodide has radian hide. And after that relied dot val method for getting the value of this element. So these and in the button, we have to add value, property value equals to b, d, and these and z we get here. Now, if we wanted to change this value, then we can also change it by passing value here in well matter. Now there are one more method or attributes. So if we want to get too specific attribute value, then we use attribute method. Let's see the example. So forgetting the attribute value, we have to pass here the attribute name. And if we want to set the value of that attribute, then we can pass here in second argument, simple as that. 12. 11 Modify CSS with jQuery: So in jQuery, we can easily add, remove, and toggle classes, insert. We can manipulate CSS any easy way. And it is very helpful for creating animations. Here, let's say we want to add a class box. What our second paragraph. On this button, click rewrite dollar. Second Ed class. And pass here the class name in double-quotes. These. When we click on this button, see walks glass is added. Let's verify that. Inspect. So right-click on the box and go to Inspect. See walks glass is added here. Now you already know what remote class method will do. It will remove the class. But here is a one useful matter which is toggle clasp matter. So at the place of this add class, I add toggle class. Now the struggle glass method is basically toggles a class which we passed between double-quotes. Save this, and take a look. See, when we click on button, box glass is added, and then click again. Then it removes the box class. This method is useful in many places like sidebar icon when we click on hamburger icon. And it will add class, so which will show the sidebar. And then we click again. It will hide the side, but simple technique, but very useful. Now let me show you something really cool. Here. I add style per class. Second, let's say 300 pixels. And run Jason. All for all properties. Cinnabon, second, ease in and out. An inbox style. Just remove this height, which is not necessarily an ad here, important for width. Save this and take a look, click on the button and see we have this soft animation. This is because of this transition property. So if we want to add or remove the glass for animation, then you're going to use this transition property, which will add soft animation for you. This tricks I learned very late in my web development career. I wish I know that for my post projects. And that's why I'm showing you these tricks. Now we have one more method or modify CSS, which is CSS method. It is similar to animate method which we saw previously. Css method is used to get or set the CSS properties of selected element. Let's say we want to know the background color of this deal. So I write here, dollar db dot box, dot CSS. Here we pass our property name, which is background color. This expression, religion, the background color of box. Let's store this in a variable called color. And simply considered a log. These color changes and z. Here we get this color. Now let's go even one step further. So now I want to set the same color. What this third paragraph text here. I like dollar has third dot css. And which property we want to set, right? It is color. And whatever value we want to set, we have to pass it at a second argument. Let's say we wanted to set this to read it right here, like this. Now we want to set this color, which we get from this box. So we just write here color. Save this and see written text color to this box background color. Now you might think how we can set here multiple CSS properties. So for that, we have to pass properties in the object, same as variety in CSS, but we have to write properties in double-quotes. Let me show you here. Have read this property with curly brackets instead of this comma rewrite colon. Now if we want to pass second property, then we add here comma and in double-quotes, I add background, dash, color, Goma, black. Note that we can write here property name, same as V writing CSS. But in any met method, we have to write that in camelcase. And that's very developers use this CSS property more often. Save this and see, we get our style here. 13. 12 Useful form methods: Bombing events are also important in jQuery because you're going to use for handling the form. So there are many form events, but these are the events which is most value we are dealing with any kind of poem. If we wanted to know all events, then you're going to use the jQuery documentation. But generally, you'll only need these poor palm events. Focus, blur, Jane, submit. I just remove all HTML code for the fresh and add one form with two inputs and two radio buttons for gender and one Submit button. Now, let's see form events. So first one is focused, which will trigger when we have focused on something. Let's say we select this input box. You can see this outline which is a sign of focus. And when we click outside of this input, then it removes from focus. In this script.js file. Hydride dollar input for selecting all inputs and then add focus event for those. Now we add here function which will run on focus event. And in that, I want to change the background color of that specific input, which is in progress. Once the addition, don't use arrow constant syntax here because jQuery has some issue with that syntax. So I'm changing the background color here. But you can do whatever you want to. There are no limits for that. Now right here, dollar, this is electing the current input element and add here CSS method. And inside it, background-color, coma, tomato. Save the changes. And David, C, when we focus on input, that background color is stingy. Now I want to make that again, right? When that input is out of focus that we have blood event. I duplicate this code. Again, this focus to blur and bias yellow color to empty this and see when we focus on debt, its background color will change. And then again back to normal. Now, let's see change event. This event will trigger when value of something will change. I duplicate this core one more time. And at the place of blur, I add a console.log. Dollar, this dark web. Save this and see when we change this radio button value, we get that value. And if we write something in text box, and then we remove glucose from that input, an input value will change. And then we can see that value here. Now, let's see the submit event. So far, submit event, we have to give our form id, Let's say registration form. Now in the script.js file, dollar, hazard transitions and form. And then we add submit event. Now pass function, which will run on submit. In this function, I simply console dot log form successfully submit this and take a look. When we click on this button. Again, see that message in console, but just a millisecond. And then our base refresh. So let's stop this. So in the submit event, we get here event object at first parameter. And in that object we have one method call prevent default, which will prevent the default behavior of submit event, which is repressing the page. So right, event, dot prevent default. Save these and Degas. See, you can see here forms submitted. So these are this form events in jQuery which will help you in a form handling. 14. 13 AJAX in jQuery: So before we start learning Ajax, let's understand what is h, x, and y we needed. Asic stands for Asynchronous JavaScript. And XML. In simple words, is x is about loading data in the background and displayed on the webpage without reloading the whole page. Many popular applications like Gmail, Instagram, Facebook, YouTube, and many more using Ajax for loading data in the background and update that existing data. If you notice, once you load this website, even if pupils something or someone sent to your email, then it will not load the entire website. That can be done by HX. Hx in itself, a little complex, but we can also use Ajax in jQuery in very simple manner. So jQuery provide several methods for Ajax functionality. First one is lower, which is used to load data from server in HTML content. Second, yet, which is used to load data from the server using HTTP GET request and post, which is used to send and load data from the server using HTTP post request. Let's start with number one, which is low. So here I demoed this previous chord in JS file. We don't need that anymore. And also from HTML file. And add here just one deal with id output. Now I create a new file called sample.txt. And inside it I add some text, like this is sample text. What is x in D? Grady? Save this. Now in this output, do I want to display this text we write in this sample.txt file. So in script.js file, rewrite dollar has output in which we want to display the text. Dark lord. Now at the first parameter, we will add here our file URL, which is sample dot dx dy. Then if we want to send data with this request, then we can pass that data in second parameter. But here, we don't want to pass data, so we don't write anything. Now, at last, we have function with three parameters, response statistics, an XHR. Let's console each of them. And z, what do we get? This? And Degas, see here we get our texts and in console, in response, we get our text. Instead as text. We get success because we successfully get that data. And an XHR, which is XML HTTP request object. We can do something like this. Here I pass condition. If x equals to success, then alert success. And if status text equals two error, then alert adder plus XHR dot status text. Save this and see, we get here success. Now I make one typo in filename and then seal this z we get here at are not found. So that's how we get data using load method. Now, let's see how to use getMethod. I comment out this goal. And after that iodide dollar dot get. Now as plus star command, you have to pass our API, you add n. So back to browser and search for Jason place holder. Open this link. Scroll down and here you get API for tasting. I want to get this user's data. So I copy this URL. Now for the second parameter, we have to pass callback function, which will run after we get data. And we also get data and status as parameter. Now let's simply console.log this data and status these. And take a look. Here we get an array of users. And status is success. In this function, you're going to do whatever you want to display this data using loop on our webpage or anything. Possibilities are limitless. Just you have to think. Now let's see how to use post method. Method is usually used to send data. So I just write here dollar dot post. Now can you guess what will the first argument? Right? It's API URL. I simply paste the same API and destined users to post, which is used to add new post. Now previously, we add callback function, second argument. But here we add data as second parameter. This data is depend on APA, different API, however, different data object with title. This is data and body. This is body. And at last we have to pass callback function. So I just copied from getMethod and paste it here. And take a look. See, here we get this data with 101 post ID and status is success. So this is how Ajax works in jQuery. Nowadays, we use recipe method, which is even easier than this. I just wanted to show you in jQuery, but you can use whatever you want to. It's totally depends on you. 15. 14 Animate website on scroll: Now it's time to learn something more exciting, which is every web developer must learn. And that is vertical integration on scroll. Look how beautiful this website looks when we add animation on scroll. So I gave this project website. So you can directly practices animation on this website. This project I created when I was working on HTML and CSS course. But I stopped that course creation for some time. And just focusing on the YouTube tutorials. I open this project, this index.html file, which lives server. Let's understand the logic of this animation. We scroll the webpage. When this section will show up. Then we have to display that section with animation. So here we have to perform just two steps. We have to identify on which point this content will show. And second, we have to add animation for that content. So the first question is how we can identify the content. So for that, we use one jQuery plugin called pay points, water adding any missions, we use library called Animate ab.js. This library has almost 100 styles of animations. Are both problems is solved. Now let's see this in the coal. So first of all, we have to add three CDN links for this. First one is for jQuery, then for waypoints, and then for any main.css, jQuery CDN, open this first link and go for this minified CDN. Copy this, and at the end of body. Based it. Now back to browser and search for the waypoints CDN. And open this CDN GAS link. Now make sure you copy this jQuery dot waypoints dot js CDN link. Now after the jQuery CDN, CDN link. Now again, vector browser answered animate CSS on this first link. And in installation and uses section, you'll get the CDN link, copy this, and paste it in the head section. Now for writing JQuery code, we have to create one js file. I create one folder called Jazz. And in this folder, create a new file called script.js. Now let's link this file with our index.html file. After the waypoint CDN link, we add script with source. And here, yes, it's less script.js. Save this and back to script.js file. Here we add dollar document dot ready. And inside this we add function. Setup is done. Now let's see about animation. Let's say West, we want to add animation on this table of contents title. So in the HTML file, we have to give this element class or ID. We can select that specific element by using that side view here, class equals two table of content. Data. Save this. And in the script.js file, dollar table of contents title, waypoint. And in that, we have to pass one function which will run when this elementary is to the top of the page. Now inside this function called what our animation. Basically what do we want to do when this element race to the top? So for now I just write console.log just to top. Sales is. And take a look, open the console and scroll the page. See, when this data race to the top, we get that message. So the waypoint is working. Now let's add animation for that. So on anyway, dot css website. From here, you can select the different types of animations. And when we hover over them, then you're going to get a copy icon. Now here, I want this period in left animation. So copy that enemies in class name. In script.js file. Right here. Dollar table of contained. Dot agg class. First of all, we have to write here, animate, double underscore any method class because without debt, any animation will not work. And after that, we just paste our animation. So this Andes and the color scars this page. And when this title race to the top, see, we can see the animation. But here is the one problem. When we don't reach to the top, then this title is still visible. So we have to hide it first. In the Styles folder. Open this style that CSS file. Hi Dan, iodide, one comment style for animation. For a glass table of contents title. We made opacity to zero. And after that glass table of contents title animate, double underscore animated. We make the opacity to one. This is the glass we added in our ED class method. Save this and see what state is not visible. Then we reach to top. Then this animation runs. Now here is one last issue. It is this, we want to see the animation when the title raised to half of the screen just at the beginning. To show that in this waypoint function, we have to pass a second parameter, which is object and indirect object. We have one property called offset. And in double-quotes, pass 50 to 80 per cent, whatever you like. Save this and take a look. See, when that title reach to 80 per cent to the top, then this animation will run. So you can see how simple it is to apply this animation. Now I want you to try this same animation of these three main titles. Pause the video and try to solve this. And after that, you're going to watch the solution for these titles. I have already give them IDs. So I duplicate this code. At the place of this class. We add has intro. Here, also has intro. And in style.css, we have to add the same style for the ID intro. We add here comma and add intro. Here. Intro, animate, double underscore, animated these, and see we get this animation. Now here in the script.js file, I created one variable. Let offset this offset object. So cut this and paste it here. Now simply write here, offset here as well, remove this object and add Offset. See, now our code looks better. Now I don't want to bore you by showing each and every animation for this project. You're going to try that by yourself. So just real quick, I add all animation for this project except this links and duration. Because we have to add here delay for this last two links. For that delay, we have to give each link unique class or ID in the HTML file. Here, list item, hold Alt in Windows, and option in Mac. And create multiple cursor by clicking. And right class. List underscore, underscore one. Now press Escape engines, these two to this one or three days. In script.js file. I copy the animation of this title. And at the end, I paste it. Now just in the selector. So dark list, link one here. So dot list link one. And in animation, I want paid in right? Now, replicate this goal to more time and change the selectors. Listening to, listening to and less Linked. List linked three days. And in Shine dot CSS file, we do the same for these three classes. These NDA color. Now you might ask, what is the delay? So far, delay in style.css file, we add dot list link to an animation delay to 0.15 s. Now duplicate this style and change for List linked three and delay to 0.3 s. So the attendees, and take a look. See, we get this amazing animation. But each link and buy this animation, user will know that our individual links. So you can see how simple and easy it is to add animation on scrolling. Just you have to understand the logic. I hope you'll learn a lot from this tutorial.