by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

4.2 Animating the Main Content

In this lesson, you will continue fleshing out your page transitions as you animate the Main Content section of the page.

4.2 Animating the Main Content

Now that we've got our hero image animating off, refresh the page here. Now that we've got that animating off, I wanna very quickly take care of the animation for our bottom section here with our three columns. So if we go back to our styles.css, actually let's go to index.html and if we scroll down below the hero image section, we have our main content section. And inside that section we have this benefit section and inside that section we have a few cards here. And the cards are what I want to animate off. And the join page, join.html, also has cards like these. And so the way we're going to differentiate one kind of card from another card is based on what page we're on, and we can see that using this div here that's wrapped around the entire page. So on the home page our div is called page hyphen home and on the join page it's called page hyphen join. So we're gonna look at the cards or the elements of a class of card that are inside these two pages and create our styles accordingly. So if we jump over to styles.css, I'm gonna go to the very bottom here, skip a couple of lines and I'm just gonna paste a bunch of css code. And then we'll explain what's going on here. So I'm gonna paste my code here. And it starts right here with page home space card. So on the index page, which is page home, for all of the cards here, we're set the position to relative, cuz I'm gonna animate them down. I'm gonna move them down as they fade out. Whenever we click to go from one page to the next. So, they each have a position of relative so that we can change their position, an opacity of one, which means that we can see them, they are fully opaque and a top position of zero. And then we've also applied a transition to all of our properties, and it's gonna last half of a second. Then, we have our position for our cards on our home page, whenever the body has a class of animating applied to it. So whenever we're animating off the final position of that animation is that our top position is gonna be set to 100 pixels. So in other words since it has a position of relative we're gonna move it down 100 pixels whenever we animate it and we're gonna animate our opacity from a value of one to a value of zero. So then we have our page join card, so this is on our join page, the three columns that we have on our join page. They're basically just gonna fade in and out, and these transitions are also going to last five seconds, so it's gonna start with an opacity of one, and end with an opacity of zero. And then you'll notice below that we have some transition delays applied to them. These transition delays will do exactly what it sounds like, they're going to delay the start of those animations. So if we're looking at our home page here the first card is going to have a transition delay of 0.1 seconds, in other words it's going to wait one-tenth of a second before it starts animating off. The second one is going to wait two-tenths of a second. The third one is going to wait three-tenths of a second. So they're gonna animate off in kind of a staggered way. And then on the join page, they're gonna animate off in a similar fashion but the delays are gonna be a little big higher. So, we're gonna have the three tenths of a second delay for the first item, six tenths of a second for the second, and nine tenths for the third. So the delays are gonna be a little bit longer on the join page. Now, the great thing about this is that when we first of all, when we add the animating class to our body, we'll see all of these animations take place. But the cool thing is, when we take the animating class off of the body, after all of our new content has been loaded, it's basically just gonna animate in reverse. So now we brought in these new animations, let's see how it looks. Let's save our styles.css page and we don't have to do anything else because already in our JavaScript as we did in the last or in the end of the last lesson. We're adding the animating class to the body. So when the page first loads, we should see all of these animations take place on the main page. So we're going to go to our page here, site08.index, and lets refresh, and hopefully we'll everything animate off, and sure enough we do. We saw the hero image start first, I'll refresh so you can see it again. And then with the slight delays in the animations, the three columns animated off one at a time. So now once our new content has finished loading, all we have to do is remove that animating class and everything should animate back on. And we'll take care of that functionality in the next lesson.

Back to the top