Text Typing Animation On Website Using HTML, CSS And JS | Auto Typing Effect on Website

hi guys welcome back to another video today in this video we are going to create auto typing effect on the website here on this computer screen you can see the last word of the sentence is changing automatically with typing effect so we will create this typing effect using html css and very simple javascript so let's start this video here in this folder i have created one index.html file and one style.css file let me open these files with my code editor which is visual studio code so this is the html file where i have added the basic html structures and this one is the css file and in this html file i have added this link tag that will connect the html and css file now we will add some content in the body tag that will be displayed on our web page so in this body we will add div with the class name container and within this container let me add a title in h1 i am coding after adding this let's come back to the folder and open this html file with any web browser so you can see this title in the top left corner let me close this browser and i will open this webpage with the vs code extension called live server so that it will refresh the web page automatically whenever i will add any changes and save the coding file so let me come back and next we will add the css for this container so let's copy this one and paste it here in this css file and for this container we will add width so the width will be 100 and height will be 100 vh which is viewport height and then we will change the background so here we will add one background color code after that we will add color it will be white so that the text color will be white after adding this let's refresh the website again now you can see the dark color in the background and this text in the white color next we have to move this text in the center of the web page for that in this container we will add display display will be flex align items will be centered so that it will be vertically centered then justify content center so it will be horizontally center now you can see this text in the center of the web page next we will increase the font size so let me come back and you can see within this container we have the h1 so here we will add dot container h1 and for this text we will add the font size it will be 80 pixel and font weight will be 600 that is good right now this coding text is written in the html file that's why it is displaying here so next we have to remove this text and it will be changing dynamically with the typing effect for that let's come to the google and search for typed js search type js on google and open this github link you can find this github link in the video description also here you can see the information about the creator of this script let's just scroll down on this page and here you will find this cdn just copy this one line of script and come back to your html file in this html file just above this closing body tag add the subscript like this and here we will add script script open and closing tag and within this script tag we will add where typed equal to new typed and in this one we will add a class name where we want to display the dynamic text so we want to display the text over here where we have added the coding so let's remove this one and instead of this coding we will add one tag which is span tag span open and closing tag and within this span let's add a class name auto type like this we have added this class name autotype in this span write the same class name here with a dot like this new typed auto type and here we will add a comma then write curly braces and within this we will add strings and in this strings we will add the word that we want to display in the title so the first word will be coding add a comma then write the second word sleeping and i will add the third word eating let's add a comma here then we will add type speed type speed will be 150 and then backup speed 150 then loop it will be true after updating this code let's come back to the webpage again and now you can see this text is changing dynamically here you can see the text is i am eating then i am coding and next you can see i am sleeping so this typing text is working next we have to change the color of this dynamic world so let's come back and you can see this text is in the span tag so here in this css we will add span and for this suspend let's add a color after adding this now you can see the dynamic text in yellow color so we have easily completed this auto typing effect on the website i hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 163,626

Keywords: typing animation, typing text animation, typing text on website, dynamic text on website, website design, web development, html css, html css website design, typing effect on website, typing text effect on website, typing animation javascript, typing effect javascript, javascript, HTML, CSS, Learning, Website Animation

Id: qEcXe51-ZTw

Length: 7min 40sec (460 seconds)

Published: Thu Mar 17 2022