How To Create Number Counter Animation Using HTML, CSS & JavaScript

hi everybody Welcome To Live blogger in this video I'll show you how to create this design with this number counter animation using HTML CSS and JavaScript and also a library called autometer so now if we reload this page we can see that we have the animation for these numbers but if you scroll up and if you scroll down again the animation doesn't happen but if you reload this page and if you scroll down here we have the animation working and uh it is also responsive so if you decrease the width of the browser window and if I reload this page and if you scroll down here we have the animation for all these numbers so we're going to see how to design this in this video let's get [Applause] [Music] started all right here I have created this folder called counter animation and I just opened it with vs code now let's create the necessary files so let's create a new file and let's call it index.html and let's create another file called style.css and let's create another file called main.js and let's start with the index.html file now in vs code you can just type exclamation and press Tab and you'll have this basic HTML file code and here let's link our CSS file and here let's link the Javascript file and let's start with the markup of our design so the first thing we will do is we'll create this this first section so for that I'll just create a section tag and here I'll just Ty high and uh we'll create one more section and here we can see we have this section and then we have this stats displayed over here and then we have another section and here between these sections let's create a division with a class of stats container and in that for each of these statistics we need to create different divisions so let's create a division with the class of stat and in this we need to have two divisions one for the number and the other for this text so let's create a division and let's give it a class of autometer and here let's add zero because the numbers start from zero and uh then let's create another division with a class of type and it is a type of subscribers so let's type subscribers over here and here let's also add one more class so that it differentiates itself from the other numbers so here let's give a class of subscribers autometer and let's go ahead and copy this stat Division and let's paste it two more times and the second one is uh videos so here let's change this to videos autometer and here let's tap videos and then the last one is projects so here let's tap type projects and here let's give it a class of projects autometer right now let's go ahead and add the CSS so let's go to the style CSS file and uh first of all let's open this in our browser so I have this extension called live server installed in vs code so once you have this installed you can just right click over here in the HTML file and click on open with live server and here we can see everything is being displayed in the browser now it's go ahead and start styling this so first of all let's target the body and let's remove the default margins and let's set the font family to Roboto and sorif and then let's select the section and for the section let's give it a height of 100 vport height and let's set the background color to f f a e0 and uh this is the section let's let's bring this text to the center so let's T display of grid and place items to the center and let's go ahead and set the font size to 90 pixels and uh this is how it looks so we have both the sections designed now let's focus on this section right here called stats container so we have this division with the class of stats container so let's start styling this so I'll just tap stats container now we want all these tats to be one next to the other so let's set the display to grid and let's Ty grid template columns and let's set it to 1fr 1fr 1fr so now we will have three columns so here we can see we have three columns over here and let's go ahead and add some margin so list up Margin and let's set the margin to 30 pixels top and bottom and Auto for left and right so that it is in the center horizontally and let's also set a Max width and let's set it to 1,000 pixels let's also add some padding so let's that padding of left and right so we can just padding in line and let's set it to 16 pixels now this padding will be essential for smaller screens so if we decrease the width of the browser window now we can see that we have this padding over here right now let's go ahead and style the stat division so here we can see inside the stats container we have stat so let's tap stats container stat and let's set the background color to e f23 3C and let's add a padding of 24 pixels and let's set the text align to Center and let's also add some gap between these elements so here for the stats container let's add a gap of 24 pixels right now let's go ahead and set the color of the text and let's set the color to edf2 F4 and now let's style this autometer so let's St stats container stat autometer so here we can see we have added this class of autometer for all these numbers so let's set the font size of the autometer to 50 pixels and let's set the font weight to bold and uh this is how it looks and for this uh type let's add some Styles so let's type stats container stat type and let's set the font size to 20 pixels now if you take a look at this original design here we can see that for these two numbers we have this plus icon so let's add that as well so for that let's go back to the index.html file and wherever we want the plus icon let's add a class of plus so let's add it over here as well right now let's go to CSS file and here let's type autometer do plus so when we have both these classes added to a division then we need to display the plus icon so we need to add an after element so let's St autometer do plus colum colum after and in this after selector we will add a content and let's set the content to plus and this after selector should be relative to this autometer plus so here let's tap position relative and here let's T position absolute and here let's type top to zero and right to min-6 pixels and font size of 20 pixels so here we have this plus icon displayed over here now here we can see that the plus icon is being displayed but it is not displayed over here beside this number so let's right click over here and go to inspect and if you take a look at this here we can see that this is a division and because of that the display is set to block so it takes up the whole width so that's why this after selector is on the extreme right side so let's go ahead and uh go to the autometer and let's set the display to inline block and now we can see that the plus icon is beside the number right now let's go ahead and add a media query so that it is responsive so let's type at media and let's type Max width of 700 pixels so whenever the screen width is less than 700 pixels all these tiles inside this block will be added to our design so let's Tye stats container and let's set the grid template columns to 1fr so that all these elements are displayed one below the other so let's decrease the width of the browser window and now we can see that all these elements are displayed one below the other so it is responsive right now let go ahead and add the number counter an animation so for that we're going to use a library called autometer JS so let's go ahead and get the CDN of the library so you can just Google for autometer JS CDN and you'll find this link of CDN js. comom and let's go ahead and copy this tag from here so it is for autometer MJS so let's copy the script tag and let's paste it over here and now let's go ahead and copy the CSS so let's copy the the CSS of the default theme so there are a lot of different themes so we have theme for car we have digital theme we have minimal Plaza and all these things over here let's go ahead and copy the default theme so I'll just go ahead and copy this link tag and let's paste it over here inside the head and the next thing we need to do is we need to create a new autometer instance so let's go to the main.js file and I'll just create a function for that and I'll just call it cre create autometer and we will get the element over here and the value so this value is going to be the number so here let's St const and let's call it autometer equals new autometer and here we can add some options so here let's tap L which is the element and let's set it to this element right here you can name this anything you want and then let's go ahead and set the value to the value that we get from here right now let's go ahead and call this function first of all let's go ahead and uh reference these elements so let's reference the subscribers autometer so I just St const subscribers autometer equals document. query selector subscribers autometer and here let's St create autometer and here we need to pass the element which is subscribers autometer and then we need to send the value which is this value right here 29,800 so let's add that over here now if you go back to our design here we have this number displayed but by default the number should be zero so here instead of value we need to pass zero and then we need to update the value so let's tap autometer do update and let's pass the value over here and now we can see that the animation is working so if we reload this page we have the animation working over here now we need to do the same for all these other values so let's copy these two lines of code and let's paste it down here two more times and the second one is videos autometer and uh then the last one is projects autometer and let's go back to our design and for the projects we need to pass the value 89 and here we need to pass the value 790 and uh this animation is not working so let's go back here we have two s's so we need to remove that right now the animation is working for all these numbers now the last thing we need to do is uh now if you reload this page and now if you scroll down we can see that the animation has already finished so if we refresh and scroll down quickly we can see the animation now if you refresh this page and if you wait for some time and if you scroll down the animation is already finished so what we need to do is uh when this element is inside the V port or when it is visible on the screen then the animation should start so for that let's go back and uh here let's add some code so we're going to use intersection observer in JavaScript for this so let's Ty const Observer equals new intersection Observer and you want need to pass the call back and options so I'll just call it call back and options and let's create these values over here so let's type const options and uh here the options you need to pass the threshold and uh you can experiment with different numbers I have come up with this number 0 0.9 which means that it will be triggered when 90% of the element is in the wave Port right now let's create the call back and in the call back we need to have entries and observer and let's create this function and let's go ahead and and loop through all the entries so let's have entries. 4 each and for each of the entry I'll just call it entry and let's create an aror function and here let's add an if condition and let's type entry do is intersecting so this will check whether the element is in the viewport and let's also add one more variable and I'll just call it has run so if the animation has run then this will be set to true so by default it will be set to false and here let's go ahead and check if the animation has already run so let's tap not has run so if the animation has not run then the autometer should update so let's cut this from here and let's paste it over here and then let's go ahead and set the has run variable to True right now the last thing we need to do is here we need to type Observer do observe and here to pass the element which we are getting from here so let's tap e and now let's see whether this works so let's go back and let's reload this page and we are waiting for some time and now let's scroll down and now we can see that when the element is inside the viewport we have the animation running so no matter how long you wait over here when you scroll down and when the element is inside the viewport then the animation will run and if I go to the mobile version and if I reload this page and if you scroll down here we can see that the animation of the first number has finished and if you scroll down again we have the other animation running so everything is working all right all right so that's basically how you can add this number counter animation using HTML CSS and JavaScript 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 [Music] day oh

Channel: Live Blogger

Views: 2,001

Keywords: javascript counter, how to make counter in javascript, javascript count up number, counter animation js, how to create counter animation using html css

Id: p2rV9tKvjFg

Length: 16min 34sec (994 seconds)

Published: Sat Dec 23 2023