right here i have created this folder called text reveal and i just opened it with vs code let's start by creating the.
Html and css files so let's click on new file and let's name it index.html and let's create a css file let's name it style.css.
All right let's start with the index.html file now in vs code you have this shortcut where you can just press exclamation and press tab and you will have this basic html5 code right let's.
Link our css file over here so i'll just type link and press tab and in the extra values tab style resistors now in the body let's start with the markup of our design now we're going to.
Now let's select this font and i'll just select the bold version so let's select this one right here extra bold.
800. and let's click on this button called view selected families and let's copy this link and let's paste it in our html file so let's paste it over here in the head.
Section right now let's continue with our markup so the first thing we will do is let's create a container division and let's give it a class of reveal text.
Container and in that we'll create an h2 for the text and let's give it a class of reveal text and here let's add the text so i'll just.
Type hi welcome and if you refresh this page here we can see we have this rectangle that.
Posts Related:
Goes before this text
So for that let's create a span so let's create a span element over here so here in this h2 we have this text and we have the span and that's basically it.With the html of our design so let's go to our style.css file and let's start styling this before that let's open this in our browser so i have this extension called live server installed in vs code.
So once you install that you can just right click over here in the html file and click on open with live server and here we can see that our design is displayed in the browser all right let's.
Go to style.css file and let's start styling this the first thing we will do is we'll bring this text to the center of the screen so let's target the body.
And let's set the height to 100 viewport height and let's set the display to grid and place items to the center.
Right now let's target the reveal text so let's type reveal text container text and let's set the font family to.
Monsterat and sanserif and let's set the text transform to uppercase and we'll set the font size.
To 60 pixels and let's set the font weight to 800 right now the next thing we will do is add the element that appears before this text is revealed.
So that is basically the span over here so this pen right here so let's also add a class for the span and let's give it a class of reveal bg and now let's target that so let's type.
Reveal text container reveal bg
Now we need to position this reveal bg relative to this reveal text so here for the reveal text we have to type position and let's set it to relative.And here we'll type position and let's set it to absolute and let's set the height to 100 percent and for now let's set the width to 50 percent and let's see how it looks.
Now let's also add a background color so let's set the background color to e63946 so here we can see our span is being displayed over here on the right now we.
Need to bring it to the left so let's set the left to zero and now we can see that the span is being displayed and we have 50 percent of the width for the span now the last.
Thing we need to do is animate it so let's create an animation and let's give it a name of reveal text and let's set the duration to 1200.
Milliseconds and let's set the easing to ease out right now let's create this animation so let's tap at keyframes and for the name let's type reveal text.
And here by default let's set the width to zero percent and here for let's try 80 let's set the width to.
100 and when we reach 100 percent we want the width set back to zero so let's set it to width 0.
Right now let's save it and we can see that the animation is working but after the animation we don't want the width to go back to zero on the left side we want it to go.
Back to the right side so here we can see for the reveal bg we have set the left to zero now here we have to set the left to the extreme right position so we have to set the left to hundred.
Percent and now we can see that the left position is moving from zero to hundred percent so till we go to 80 we don't want the left to move so here also we have to set.
The left to zero and now we can see we have the correct animation for the reveal bg so let's refresh it once more and we can see that the animation is.
Working all right now the last thing we need to do is we don't want to display this text by default we want to display the text after.
80 percent of the animation is done so let's add an animation for the text as well so this is the reveal text let's create an animation.
And let's give it a name of show text now for this animation let's also type forwards so that the animation stays in the last.
State right now we need to add an animation delay for this show text animation because we don't want to display this text in the beginning we want to display it after the.
Animation of the reveal bg has completed so let's add an animation delay so just type animation delay and.
Let's set it to 1000 milliseconds and by default we will set the color of this text to transparent and now let's create this show text animation.
So i'll just type at keyframes show text and let's set the last state of the animation so we can just type two or you can also.
Type hundred percent and let's set a color over here for the text let's set the color to one d three five five seven and now we can see that the animation is.
Working all right we have the animation of the text displayed a little late after the reveal bg animation so everything is working all right now you can go ahead and change these.
Colors and these duration to whatever you want when you change the duration of this reveal bg also make sure to change the duration of this animation delay right so that's.
Basically how you can create this reveal text animation using html and css so that's it for this video i will leave the link of the source code in the description and 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 one you.
