FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Animating the Hero Image

In this lesson, you will get your feet wet with animated page transitions as you create a CSS animation for the hero image on the page.

4.1 Animating the Hero Image

Hello and welcome back. In this lesson, we're gonna get started on the really exciting part of our course. And this is where we start talking about the animated transitions from one page to the next. And what I wanna do here is I want to animate off the pieces of the page that are no longer gonna be there. And then once the new content has loaded in, we're gonna animate that new content back on to the page. And I don't wanna do it all at once. I wanna start just with this hero image here. And once we get the hero image working we'll be able to finish with the rest of it pretty easily. So what I wanna do with this hero image, is I want to create a basically an element here at the very top and another one at the very bottom of our hero image. And initially they're gonna be so small they're gonna be invisible. They're gonna be the full width of the page, but they're gonna have a height of zero. And then when we click to go to a new page they're gonna animate up and they're gonna close. So the top ones gonna animate down in height, and the bottom ones gonna animate up so that it looks like the image is just collapsing inside of it. And then when the new content loads underneath those items, after it's finished loading then they're gonna open back up. They're gonna animate back open and we're gonna see the new content underneath it. Well, we're gonna do that using the before and after pseudo classes for our entire hero image section. And it's gonna be really easy to accomplish as far as the animation itself is concerned. So all of our animation is gonna be done using CSS transitions for this particular course. Now you can get more complicated using CSS keyframes or even using JavaScript to create these animations. But it will require a lot more logic in your JavaScript in order to get those working right. Our logic for this, however, is going to be really, really simple. All we're going to do is we're going to create a beginning state and an ending state for our animations. And our ending state is going to be defined by a set of CSS rules that rely on the body of our document having a class applied to it of animating. So when our CSS sees that the body has a class of animating on it, then everything inside of it that's supposed to animate, will animate. And we'll see as we move forward that it's really, really simple to do. So we're in a new folder now. Now all the changes we make in this lesson will be saved in the site 07 folder. And again, here's our main nav section. And we spent a lot of time there in the last few lessons, but you'll notice just below that is our hero image section. And we're gonna create a before and after pseduoclass for this hero image section. And it's gonna be basically a blank piece of content with a height of zero and a width of 100%. And we're not gonna see it at first, but when the body here, when we add a class to the body, then we're gonna change the height of those before and after elements on our hero image. So let's jump into our CSS and see how we're gonna make that happen. So I'm gonna scroll down until we find our hero image section. And we see that right here. And we have a couple of headings inside our hero image and then our benefit section right after that. So right after our benefit section, I'm gonna create a new rule for hero-image::before and, so we have a comma there, and hero-image:: After. So some of the, or a lot of the CSS we're going to apply to the before and after are gonna be identical. The only difference is gonna be the top and bottom location. So the before item is going to have a top position of zero and the after item is going to have a bottom position of zero. Now in order for this to work we're going to absolutely position the before and after pseudo elements. But in order for that to work right we need to make sure that the hero image itself, the element that contains those before and after items. We need to make sure that that has a position of relative, otherwise the absolute positioning that we do inside here is not gonna work right. So in case you were wondering that's why the hero image has a position of relative applied to it. So now we're going to go into our before and after rule. And one thing that's easy to forget with your before and after is that you always need to have a content property, even if that content is going to be empty. And this content is empty, so we're just going to put a set of opening and closing single quotes there. Then I'm gonna set a background color on it and eventually we gonna set that background color to white. In fact I'll go a head and do that here but in the moment individually I'm gonna set the before and after to two different background color, just so we can see it a little bit better. But we're gonna eventually have our background color set to white here, we're gonna have our height set to zero. When we animate it out, the height's gonna be set to 100%, or to its final height, but for now it's gonna be set to zero. And then we need to make sure again to set our position to a value of absolute. And I forgot about the width. Let's go back up just below our height and let's set our width to 100%. We want it to take up the full width of the browser window, the same width as the hero image itself. And so then, after position absolute, we're gonna set our left property to zero cuz we're going to align it to the left edge of our browser window. And then we want it to be on top of everything, so just to play it safe, I'm gonna give it a really high z-index, so we'll just give it 9999. And we're gonna leave this at that for now. There's a little more we need to do to this rule in a minute, but for now we're gonna leave it at that. And then we're gonna create separate rules. For hero-image::before and hero image after. So for the before image, all I'm gonna do is set the top position to zero. And since it has a position of absolute and the hero image itself has a position of relative. Then when we set the before psuedo class top position to zero, it will place it at the top, not of the browser window itself but at the top of the hero image. So then we'll do the same thing for our after. Except, instead of top we're gonna set the bottom property to zero so that it will be aligned to the very bottom of the hero image. Now as this is, if we were to save that, then just back into our page and refresh, we're not gonna see any difference. Now there is a before and after pseudo class there, but they both have a height of zero, so we can't see it at all, it's completely invisible. However, if we were to come down here and create another rule called before and after. So, here are image before and here are image after. And it's too many opening curly brackets there, but we're gonna set the height here to 150 pixels. And the reason I'm doing 150 pixels is because the hero image itself is 300 pixels. And so I want the top and the bottom here to be half of that width so that when they expand out, and come together. It will take up the full 300 pixels of height and we'll see that in just a second. And for now, I'm also gonna take this background color. And for the before, I'm gonna set it to green, if we can spell it right. And for the after, I'm gonna set it to, let's do blue. And again, this is just so that we can see how these two are behaving. But for now you'll notice I set the height up here, but down here I'm overwriting the height. And you'll see why I'm doing it separately later, but for now we're just gonna leave it at that, save our file, and then refresh our page. And now we can see what the before and after pseudo classes are gonna look like after they're done animating. So again, they both start off with the height of zero but the green one is gonna be at the very top and the blue one is gonna be at the very bottom. And as they animate, they're going to basically close in on each other. So let's see if we can make them do that. What I'm gonna do is, remember I mentioned before that all of this animation is gonna be triggered based on a class that we're gonna add to the body of our document. So we don't want our height to be 150 pixels unless the body has a class of animating on it. So in that case we're gonna look for the hero-image::before and hero-image::after that are inside the body with a class of animating. So we're gonna go to the beginning here and we're gonna type body.animating space, hero-image::before. So this height is not gonna be 150, unless the hero-image is inside a body with the class of animating. Same thing over here, body.animating, space, #hero-image::after. So again, those heights are not going to change until we add the animating class to the body. And we can do that very easily when the page first loads by going to our main.js. And then somewhere in here we're just going to add a CSS rule that points to the body of the document. .addClass, animating. So when the page first loads we are going to add that class to the body, and let's see what happens. We're going to refresh the page. There we go, had to refresh it a second time in order to get it to work. But when we refresh the page we basically see what we saw before with green at the top, and blue at the bottom. But the problem is it's not animating, we want to see that animating in order to do that, we just need to go back to our styles. And take this rule here, the before and after rule, not the one where it's animating, but the original one up here. And after our Z index, I'm going to create a new property here called transition, and I want to transition all properties. So any time a property is changed on the hero image before or hero image after. Any time a property is changed, it's going to animate. And how long do we want it to take? Let's say we want it to take .5 S, or half of a second. Now, let's save that again. Jump back into our browser and refresh the page. And now we actually see it animate closed and that's what we want. We can refresh it again to watch it again. So now let's see what that looks like when we don't have a green and blue background, but instead we have a white background. So we'll jump back into our CSS here. And I'm gonna get rid of the blue background that we're putting on the after. I'm gonna get rid of the green background we're putting on the before. We're gonna save that and we can see up here in the original before and after rule that our background color will now be white. So we'll save that, refresh our page again. And now when it closes up, we see what it's gonna look like eventually when we finish up our page. So now we've got our initial item animating, but right now it's animating on page load and that's not what we want. We don't wanna it to animate until we're ready to switch to a new page. And then we also want our content down here at the bottom to animate as well. And so we'll get to all of that functionality starting in the next lesson. Thank you for watching.

Back to the top