7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 Text Scroll

Hello, and welcome back to Practical Web Animation. In this lesson we're going to continue with the use of the before and after pseudo classes, but this time we're gonna do something a little bit different with it. What I wanna do is I wanna create a hover animation so that when I mouse over one of our navigation items, the text inside that button will scroll up and disappear above the button itself. But as it does that, another chunk of text that's gonna have the same content but the text will be bold, it will animate up from beneath and replace that text. So it's gonna be a nice little scrolling effect that will move back into place whenever we mouse out, or move our mouse cursor away from the button. Now there are a couple of ways we could do this. We could create a separate span or some kind of other content inside our list items that just repeats the same text, and then we could just move one off as we move the other one on. Or we could use the before after pseudo classes to store that content, and then we'll just animate it on that way. So we're actually gonna be using the after pseudo class for this. Now we don't see anything new here on the screen we've seen a nav list setup just like it's been done before. Pretty much the same styles applied to it. A little bit different here and there with color and size and things like that, but for the most part it's nothing new. So you can grab this starting pen from the course notes and once you open it up let's go ahead and click on the Fork button to create a new copy of it. And once we have the new copy open, I want to discuss the use of data attributes. So I'm gonna come down here to the very bottom. I'm gonna skip a couple of lines and I'm going to point to our anchor tags. So we're going to do main-nav li a. And I want to point to the after pseudo class here. And I want to give it content: "HOME". So when we do that, as you can see, it adds the word HOME to the end of all of our links. Now it would be nice if we could make this a little bit more dynamic so it could look at the content and see what text it needs to insert here. Well, one way to accomplish this is inside our anchor tags here, we can add a data attribute, which is just an attribute that starts with data- hyphen. And let's call this title, for lack of a better word. So we're going to set this attribute equal to the same text that we have for the button itself. So we're going to set this one equal to "Home". For our next one we're going to create the same thing, data-title, and set this one equal to "About Us". And this might be easier just to copy and paste it all, so let's just copy that data-title attribute, and then we'll paste it for each link and then just change the text. So this one is "Products" and then we have "Blog" and "Contact Us". All right, so now we have these data attributes, and we can actually access those data attributes in our CSS. So for our content here, instead of pointing to "HOME", let's get rid of that and what I'm going to do is, I'm going to type attr for attribute and then inside the parentheses here, we're going to type in the name of the attribute, which in this case is data-title. So now, as you can see, each of our buttons is basically just repeating its own text so we have Home twice, About Us twice, etc. And then we can style all of these separately. So we could give this a display property of block. That way it will show up on its own line, and we see that it moves down below our original text. And then we can style the rest of it however we want. We can give it font-weight: bold. And then one thing I wanna do is I wanna make sure we set the width and height to be the same as the width and height of our original text. So we're gonna set our width: 160px and our height: 40px. So that's the same height as the container of the text itself, or the same height as the, width and height I should say, as the list items themselves. So now we have the bare bones for what we need to do to create the animation that we're talking about here. And what I want to happen is when we hover over one of these buttons, we want that the original text to move up and the replacement text to move up from beneath it. So you could put something completely different here. You don't have to use the same text, but that's what we're going to be doing for this particular lesson. We're just gonna have a bold version of our text that animates up. So since this after pseudo class is contained inside the anchor tag itself, remember, it's considered part of that anchor tag, it's just gonna show up after the content inside the anchor tag. If we move up the anchor tag itself, the after pseudo class, the content inside that will move up with it as well. So in our hover for this anchor tag, let's go ahead and create that down here at the bottom. Let's point to .main-nav li a:hover. And we don't need to point to the after pseudo class, just the anchor tag itself. We're gonna change the top position, and we're gonna move it up. Now remember, the height of our list item is 40 pixels, so we're gonna move it up 40 pixels. So we're gonna set our top property to -40px. Now if we hover over it, you can see that nothing happens. And the reason for that is, as we've talked about in a previous lesson, when we use a positioning attribute like this or property, such as top bottom left or right, it's not really going to work unless we have our position set to either relative or absolute. In this case we want it relative. So let's come back up to our anchor tag, and we're gonna set our position here to relative. So now that top property should work. Let's hover over our buttons, and sure enough, we get what we're going for here. Now obviously we don't want the text to just suddenly turn bold. If we wanted that, we could just create a hover effect where we set the font weight to bold. Instead we want our initial text to animate up while the new text animates up from beneath. So all we need to do for that is to create a transition property on our anchor tag. So in our original anchor tag rule, we'll set our transition property, and let's do one second. Let's first of all do all 1s for one second. We will hover over, and we see that's still not animating because we haven't created a top property in the original rule. So just before we set our transition property, let's create a top property and set it to 0. So now when we hover over it, there we go. We see one piece of text animating off while the other one animates on below it. And that is a little bit slow so let's change that to half a second. And there we go, that's a lot quicker. So now what I want to do is I want to set the overflow for the list item to hidden so that any text that's outside of the list item won't be visible. So that should be easy enough. We'll just scroll up till we get to our list item here. We'll add a overflow property and we'll set it equal to hidden. So immediately we see the text at the bottom disappear, and now when we hover over each of our buttons, we can see the animation occurring as we expected. Now if we wanted to, we could also jump into our anchor tag for the hover event. We can also change the background color, so if maybe we want to darken up the background color as it's animating up. So let's set our background color to 197224, and that should give us a darker green, so we'll hover over it. And you'll see that that's not exactly what we're going for. Right now it's just setting the background color for the original item, the anchor tag here, but it's not affecting our pseudo class. And the reason for that is, remember, the anchor tag itself has a height of 40 pixels. So if we change the height of our anchor tag, let's come up here to the original rule and change our height to 80px instead of 40. Then it should give us the effect we're going for. Yeah, there we go. Now our background color is fading as we expect it to. And the reason that works, the reason we can set this to 80 instead of 40, is because the list item itself has its height set to 40. So anything outside of that 40 pixels of height is going to be hidden because of this overflow property here. So now we can hover over each button, and we can see the new text scrolling up as the old text scrolls away. So thank you for watching, and we'll see you in the next lesson.

Back to the top