Will leave the link in the description of this video and i'll also leave the link of the source code so you can just copy and paste the code to your websites all right so let's get started.
here i'm in the dashboard of my blogger website and we can add this design into a post or a page let's add it inside a post so here we are in posts let's click.
On new post and here we'll just add a title as a type text reveal animation and the first thing you need to do is go into the html view so click on this.
Button and click on html view now here you can add your code your html and css so first of all let's add the css i'll just create a style tag for that.
So these are all the styles for our design and if we take a look at these keyframes these are the animations so here for the animation we have set the duration to 1200 milliseconds you.
Can change these numbers to whatever you want right now let's copy this and let's go back to our post and let's paste it over here inside the style tag.
Right now let's paste the html so let's go outside the style tag and let's go back to our source code and let's go to the html file and let's copy this content inside the body.
And let's paste it over here and here we can see this is the text that gets displayed when the text is revealed and you can add more text if you want so.
If you want two of these headings you can just copy and paste it down here and i'll just change this text and now we can see there are two text.
Posts Related:
Over here and in this way you can add
Any number of text you want so i'll just delete the second line of code right now let's go back to our post and that's basically it with the html and.Css now here we are using a font called monserrat so if you go back to our html here we can see this is the link of the font so let's copy.
This link from here and i'll just paste it over here outside this style tag and if you scroll up here we can see this is the color of the.
Text and if you scroll up even more this is the color of the rectangle so this red color over here is this color right here so you can change these colors to whatever you want.
Right now let's click on publish and confirm right our post has been published so let's click on view and here we can see our.
Animation is working but we have some problems in the styling i'll just reload and here we can see for the rectangle we have full width so i'll just right click over here and click on.
Inspect and here we can see for the h2 we have 100 width so we have to change this h2 into an inline block.
So if i just type display of inline block and now if you take a look at the width we can see that we have the width of the content.
Let's take a look at the span and let's just try and increase the width to 100 and now we can see we have the correct width but we don't have the correct.
Height for this span that's because
We have a line height already assigned by the theme for this h2 so if we select the s2 and scroll down here we can see we have a line height.Set to this value 1.6 m so if i just change this to 1 now we can see we have the correct height for this pan so we need to make those two changes we.
Need to change the display of this h2 to inline block and we need to set the line height to one so let's go back to our post and let's open the post.
And let's target the h2 so here in this reveal text let's type display of inline block and we'll also set the line height.
To 1 right now let's update this and let's go back to our post and let's refresh this page and now we can see we have the correct.
Animation for the text so everything is working all right so that's basically how you can add a reveal text animation to your blogger website now i will leave the link of the.
Source code and also the design video in the description of this video so you can just go ahead and check that out so that's 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 day.
