Up next in 10
Animated Text Reveal Tutorial
660 views
Feb 7, 2024
The "Animated Text Reveal Tutorial" is a tutorial video that provides step-by-step instructions on how to create dynamic text reveal effects using HTML, CSS, and possibly JavaScript. Throughout the tutorial, viewers are guided through the process of designing and implementing animated text reveals, where text elements gradually appear or transition onto the screen in a visually appealing manner. The video covers essential techniques such as CSS animations, transitions, and keyframes to achieve smooth and eye-catching text effects. Through clear demonstrations and explanations, viewers learn how to customize the timing, duration, and styling of the text reveal animations to suit their design requirements. Whether you're a beginner exploring front-end development or an experienced designer looking to add creativity to your projects, this tutorial offers valuable insights into creating captivating animated text effects.
View Video Transcript
0:00
Hello everybody, welcome to this week's CSS challenge video
0:04
And this week we're going to be creating this animated text reveal on the right side of the screen here, which is perfect for showing large headings in an eye-popping way on page load
0:12
or when a user scrolls down to it. To get started, let's open up our index.html page to view what we have started
0:19
As you can see, we have a nice background image, and that's all we have for now, which is perfect
0:24
So let's start adding the HTML that we're going to need. For this project, the HTML is really straightforward
0:28
All we need is one set of text with a class. We'll just call it reveal text since this is the text you'll be revealing
0:35
And in here we'll just put the text we want to reveal. If we save that, you'll see we now have our text on the right hand side here, which is perfect
0:42
Now we can jump into our styles.c.s.c.s over here and start styling the actual text
0:46
The first thing we want to do is select this text and make it a little bit larger
0:51
So we'll just increase the font size to, let's say, 7em. And we also want to make it bolder, so we'll change the font weight here to be nice
0:58
which is about as bold as you can get and we'll save that. There we go, we're going to have a large bolded font right here
1:04
Now you may think the next thing we should do is change the text color to be white
1:08
and then hide and show part of it as we go. But that's a lot harder in CSS than what we are going to do
1:14
What we're going to do actually is make the text transparent here. And then we want to add a background that is going to show on this text
1:21
So let's do background image. And this background image I have right here is just a single white pixel
1:27
single white pixel, and we're just going to use URL to select that, and it's called Reveal Background
1:34
And if you save that, you see now we have this white background, but what we want to do
1:39
is we want to make it so that the white background only shows where the text is actually at
1:43
What we're going to use is a property called background clip in order to say, where do we want
1:49
the background to show, and we'll say we only want it to show the text, and if you save
1:53
that, you'll see nothing actually happens, and you're thinking, okay, why is that
1:57
That's because some browsers don't actually support all properties and you need to use a browser
2:01
prefix in order to support that property. So we'll go up here and we'll add WebKit background clip and we'll say text here
2:10
If you say that, you'll now see that the background only shows where the text is at
2:15
And that's because this version of Google Chrome I have here does not support background clip for the value text and we have to use the WebKit background clip prefix in order to use this And when you do this you always want to make sure that you put the prefixed values above the actual values
2:30
since CSS will work from the top down, and if your browser supports this natively
2:35
you want this to be the last property that's used, as opposed to the prefixed version up here
2:40
Now if you remember from our animation over here, you'll see that we have a bar moving up and down
2:44
revealing the text as it goes. In order to make that happen over here, what we want to use is a property called background
2:51
repeat, and we only want to repeat on the x-axis. If you say that, you'll notice our background actually completely disappears, and that's because
3:00
it's slightly above our text, so if we comment out the showing it only on the text, and say
3:05
that you see we have a single pixel line of our background right here above our text, which
3:10
is exactly what we want. Now we can comment that back in, save it, and what we want to do is we want to add an animation
3:16
to our property in order to animate that bar up and down and make it a little bit larger and change the size as we go
3:22
So let's go down here, add our keyframes in for animation. We'll just call it Reveal Background since it's animating the background for our reveal text
3:31
And we'll start with what we want it to look like at 0%
3:34
So at the very beginning of our animation, we want the background size to be 0 pixels
3:39
We don't actually want any background at all. And then we also want the position of our background, the Y position precisely
3:46
to be at 0%, so it'll be at the very top of our text
3:50
And then we can move on to our next section, so at 10% here
3:54
where do we want it to be? And if we look back at our animation over here
3:58
at the beginning, you'll notice it pauses a little bit at the top, moves down, then pauses at the bottom. So we want a slight pause at the top
4:05
So what we want to do is we'll go in here, we'll use background size
4:10
set it to 30 pixels, so our background gets slightly larger, and then we'll use the background position
4:15
position of y and keep it at 0% so that it doesn't actually go anywhere which is exactly what we want
4:21
that's perfect and now we can move on to the next part of our animation as you can see over here it moves
4:26
down to the bottom and then pauses there so let's work on the downward part of our animation so we'll go 35
4:32
here and all we need to do is just change the background position of the y to 100 so it'll be
4:39
at the very bottom of the text then we want our animation to pause right here so we just say also do the exact same thing at 45 So now it pause at the bottom So now we have our animation starting at the top pausing for a little bit moving down to the bottom pausing for a little bit
4:54
And now we just need to move our animation back to the top again. So in order to do that, we'll go over here
4:59
We'll say at 70%. We want our animation to move back to the very top
5:05
So we'll use background position Y. Here, and we'll set that to 0%
5:11
So now our animation will move back to. to the top and then lastly our animation once it gets to the very top just fills in all the size so our background size increases so what we need to do right here is that 100% we just want to increase our background size make it 200 pixels and there we go that's our entire animation complete except for one step we need to set our background size here to be 30 pixels and that's because all
5:42
Otherwise, our animation from 10% all the way to 100% will slowly increase the background size
5:48
but we only want it to increase between 70% and 100%, so we tell it where to start at 70% and where to add at 100%
5:56
So now let's add that animation to our reveal text. Let's say animation, we want to give it the name, which is reveal background
6:06
We'll say to last two seconds, we want ease in out as our animation speed, and we'll just put it on an infinite
6:12
for now so we can view how it goes. And if we save that, you see we have our text pausing to the top
6:17
moving down to the bottom, moving back up, and then filling in completely, which is exactly what we want
6:23
So now let's turn our animation off of Infinite. If we save that, you see that our text goes, fills up
6:28
but it completely disappears here, which is not what we want. And that's because animation by default
6:34
reverts to whatever the properties in your class are at the end of the animation
6:39
and we want our animation to take on whatever properties are in 100. are in 100% at the end of the animation
6:44
So in here we'll say animation direction, or fill mode, sorry, and we'll set this to forwards
6:50
which means the animation will take all the properties from the last keyframe and save it into this
6:55
So if we save that, we now see that our text goes, stays completely filled in
7:00
and that's because we use the fill mode of forward, which means it keeps the background size of 200 pixels
7:05
at the end of the animation as opposed to reverting back to zero And this is all there is to creating this animation If we save our page again we can see the animation run through again and it looks really nice But you remember we use this prefix up here in order to support this text property
7:20
But what if you get a browser that doesn't support this WebKit background or this background clip
7:24
So what if, for example, neither of these properties worked? What does our animation look like now
7:29
If we save it, you'll see this is ugly. This is not what we want. So what we want to do is we need to use a property of CSS called S
7:36
supports in order to say to test to see if the browser actually supports these two properties
7:42
here before we do our animation. So we'll go in here and we'll say supports WebKit background clip for the value of text
7:52
or if it supports the background clip property for text. Then we want to put all of our animation background code into here
8:05
So let's say reveal text as our selector. And in here, we want to put all of our code for animation
8:14
Just like that. So now if our browser supports these properties, it'll render what's in here
8:21
But if it does not, it'll render what's in here. So for example, if we wanted to emulate a browser that does not support background clip
8:28
we would just comment that out and save it. And you'll see now we just have black text
8:32
So we can change that color in here to be white. 극 So now if we don't support this background property, we'll have this white text right
8:41
here, and if we recomb this back into place, put these properties back in, and we have
8:47
a browser that does support background clip, and we save it, you see that we now get the
8:51
animation that we want, and again, if our browser does not support it, we'll just get plain
8:55
white text, which is fine. So now we have a full-proof way of showing this title for browsers that are older and
9:02
don't support WebKit background clip text or back-told. background clip text, and for the newer browsers that do support it, we'll get this nice
9:09
reveal animation whenever our page loads. And that is all that you need to know to create this reveal animation on the right here
9:17
I have all of this code available on my GitHub for you to download locally, or you can view
9:21
it on my code pen page in order to tweak it right in the browser without having to download anything
9:26
So if you guys did enjoy this, please leave a like, and let me know down to the comments
9:30
below what CSS challenge you want me to complete in the future
9:34
Thank you guys very much for watching. Have a good
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Online Goodies