Typewriter Effect CSS | [EXPLAINED]

in this lecture I'm gonna teach you how to create this very cool CSS effect this type writing CSS effect so it writes the sentence and then it waits for a little bit and then it deletes it a little bit faster than the way it has written it so let's dive right into it so we're going to create our HTML and CSS files as usual so I'm going to create my my HTML first I'm going to name it type dot HTML and I'm going to create another one for the CSS type dot CSS the HTML is going to be very short so I'm going to write the HTML template and then I'm going to give it a title type writer and then I will link it to my CSS file link type dot CSS go to the body now we are going to create a div and that wraps the h1 the text so div give it a class of wrap I don't know and then I'm going to create an h1 for the text I will write this is a type writer haha I don't know okay so I will open this in the browser and see what we're having so very simple very ugly so now we are finally going to move on to the CSS so first I will push this sentence a little bit down right here just so that we can visualize it in the video for your case you don't really have to do that it's not very important so I'm going to use a flexbox for that ok so I will target the div that I named wrap so wrap and then I'll do this play flex align items Center and obviously we would have to give it a a height I'm going to give it 95 viewport height little refresh there you go it's right in the middle so now we're finally able to start working on our main h1 which is the text so target the h1 h1 and the first thing I would do is actually get this every single first letter I would like to capitalize it I would like to capitalize every single letter in the text so for that I would do text transform capitalize there you go it got capitalized I would also want to change the font family so I will do font family I'll give it a fun that's called con solos I'm like that that's looking pretty well already and now we are going to create something that is so cool it's actually very fun to do you see this white line right here this one that one that one it's called the carrot right here we are going to create this carrot thing blinking carrot so for that I will do a border border right I will make a border right for these sentence so I will will do 3 pixels solid black okay there you go we got this border right here now we have to make it blink just like here it's blinking right so for making it blink I'm gonna have to use the animation so I will write animation and actually I'm not only going to use the animation where the blink carrot I'm also going to use it for the whole text so that it gets this typing effect like this so I'm gonna create two animations the first one I'm going to name it typist just giving it a random name and I want the period of time the duration I want it to be around 15 seconds I'm gonna name the second one carrot you can name it whatever you want and I would like the duration to be around 0.7 seconds now we are going to create the keyframes for the two animations and for that I will have to do P frames and give I'll start by the carrot one so carrot and at the zero and 100% I would like the border to be transparent so for that I will do 0% and the 100% I would like the border to be transparent so I will do border-color:transparent and at the 50% the border color will change to black so border color black and now Oh it's doing at only one time I have to refresh so because it's doing it only one time we want it to be infinite so we are going back to the carrot and we'll do in in it save it refresh there you go there that's what we want but you can see that it's actually fading in and out a little bit so we don't want that at all and for that we are going to use an attribute called steps step end is one of the values of a property called animation timing function and the default one is called ease and now right here is applying that default value right here so this is the default value it's called ease and what this basically does is the animation start in start slowly accelerates in the middle and then this slows down at the end so I'm gonna play the animation just like that but we don't want that we want a different one which is called the step end value so this is the step end the step end the animation stays at the initial States until the end when it instantly jumps to the final state so it is right here and then it instantly jumps to the final stage just like this right so this is what we want we want this we want this black and then instantly changes to transparent and then goes back to black and then and so on so I'm going to apply this step end function value I will put it right here after the infinite so step and save refresh there you go now it's working so we're done writing the key frames of the blinking carrot now we're going to move on to writing the key frames of the CSS effects this whole text CSS effect we're going to make it looks like this right and the method I'm gonna use is the width so when it deletes it the width go to zero and then when it writes it the width go to 100% but it's not that easy it's a little complicated than that we're going to cut this to different parts okay so I'm going to write the key frames for the text effect that we have called we've named it typist so frames typist scientists and as I said before we will be dealing with width so I'm going to cut this to four five parts I'm going to write zero percent and then 30% and then 80 percent and then 90 percent and then finally 100 percent and for the width I'm going to use a unit that is pretty not very known okay it's called CH which stands for characters now I'm going to array 0 percent weight and then 0 characters so what the 0 percent at the 0 percent when it starts the width is 0 character that means it starts from 0 now we are going to put the second percentage I want it to be 30 percent and I want the width to be set to whatever number of letters that we have in in the text so we are going to have to count the number of letters that we have here and I'm going to use this online website that counts with the characters so my case I have 26 character so I will put 26 CH so at the 0 percent it starts from 0 at the width is going to be 0 and at the 30 percent the width goes to 26 characters so it writes the whole thing in 30% of whatever a period of time that we've put here in our case there it's a 15 seconds now I'm going to add another which is 80% so I'm gonna do 80% and I want the width to be the same as before so in my case it's 26 so I'm just gonna leave it 26 so with 26 characters that way it doesn't change at all it stays it stays at the 26 after that I'm also going to put another percentage which is 90 90 percent and I want the width to be set to zero I want it back to zero and then finally 100% the width is going to be it's also going to be zero percent zero characters so I'm gonna explain this so at the zero percent the width is zero that means it starts from zero and at the 30 percent it writes the whole thing because we have 20 characters and and and we just put here 20 characters and at the 80% it's not going to change anything and then very shortly it will delete it and it goes back to zero and then 100% it also stays zero now we're gonna take a look at what we have so if i refresh this happens and that's this is not what we want we wanted to write it this way but it's not writing it this way the words are getting stacked on each other which is not what you want so we are going to use a property right here we're gonna go all the way back to the h1 and we will do the whitespace property so white space property and I'm going to route it to to set it to no ramp and now the words are not getting stacked on each other but it's not it's not doing what we want either so we are going to use a property called the overflow property so we're going to set the overflow to hidden over flow hidden and at this point it's writing it but the animation timing function is not what we want we wants a different one which is pretty close to to the step in that I talked about recently and as I have explained it before the default value of the property that's called animation timing function is ease so it's it's it starts very slowly and then it accelerates in the middle and then it slows down at the end just like this and this is basically what's happening here if i refresh it starts very slowly and then it accelerates and then it slows down but we don't want to do that we want it to go this way okay we want it to go this way and for that we're going to use a different value that is called steps and the way to write this is obviously animation timing function and then we put well we are going to write steps and then we're going to put a number in between a prat of brackets and what this basically does is that it breaks it into multiple states and then we'll it will start jumping from a state to another and then and and the number of states is basically the number that you put in between those brackets so in my case I put four here and when I play the animation it will start jumping from one state to another four times so here is a mini-challenge for you I want you to figure out the number of states that we have here so that we can make it do this type of animation I'm gonna give you five seconds all right so I hope you already found the solution so the number of state is basically the number of letters that we have here the one that we've already calculated which is 26 in my case and now on what we've got to do is go back here go to the animation and right after the duration I'm gonna write steps 26 which is the number of characters I'm also going to put infinite here so that it does that it does the animation infinitely refresh and there you go this is actually the CSS effect that we need

Channel: ProMaker Dev

Views: 1,726

Keywords: Typewriter Effect CSS, Typewriter Effect HTML CSS, Typewriter Effect HTML Code, Typewriter Effect HTML, HTML Typewriter Effect, CSS Typewriter Animation, Typewriter Animation HTML, Typewriter Animation CSS, Typewriter Effect JavaScript, Typewriter Effect JQuery, typewriter effect using css, text typing animation, typing animation, display text letter by letter, show text letter by letter, reveal text letter by letter

Id: Sm1CYfuIKM8

Length: 14min 50sec (890 seconds)

Published: Wed Apr 01 2020