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

5.6 Creative Product Selection

Hello and welcome back to Practical Web Animation. In this lesson, we're gonna pick up right where we left off in the last lesson. We've already got the headers for our panels styled. And now, we're gonna jump down to the body of the panel. So the URL for the starting pen is gonna be in your course notes for this lesson, once you open that up. Let's go ahead and create our own fork, or you can follow along with where you left off in the last lesson. So I want to again tackle the body of these items now. Ad these panels, if we look at our HTML, we have three different panels. Let's stretch this out a little bit so we can read it. We have a panel div, and then inside that we have a panel heading div, and then below the panel heading we have our panel body. All of these panel classes are Bootstrap classes and they have their own default styling. So for the panel body, I want to make sure that all three of these bodies are the same size. Right now, the third one is a little bit taller than the first two. So I want to make sure they're all the same size, and I'm gonna do that by hard-coding the size. So we're going to jump into our CSS, scroll all the way down to the bottom and then we're going to create a rule for .panel space .panel hyphen body. And then, inside that rule I want to give it a height of 300 pixels. So now when we scroll down we see that they're all the same height and that looks a lot cleaner that goes along with the basic effect that we're going for here. So the next thing I wanna do is gonna be similar to what we did with for our header where we have this little two pixel padding of white space around the edge and then inside that we have a background color. We're gonna do the same thing for our panel body except instead of a blue background, we're gonna have a light gray background. So for the panel body itself on to do the same thing we did for the panel header which is I want to give it a padding property of two pixels and a background color of white. It's already white but I'm gonna go ahead and specify that anyways. Base. So then inside that panel body, if we look back at our it's going minimize JavaScript we don't need it just yet. If you look back at our panel body div, just inside that we have a div called table-container as a class of table-container and then inside that it has a table. So we're gonna give that table container the gray background. So let's create a new rule for the table hyphen container class and here I want to give it a background color of pound each which is a very light gray shade and we can already see that two pixels of white space around the edges was looks really nice right next to that grey border. Next I want to give this table a height of 100%, so that that gray background extends all the way to the bottom and then we've created that grey background but I'm really just using that as kind of a back up what I really want here is a gradient. So in addition to the background color. I'm also going to create a background image property and let's stretch this across so we can see more of our CSS. So we're going to create a background image property and we're going to use the linear-gradient property for that. And the way that works is inside parentheses we're going to enter in our two values. It's going to fade from one shade to another. And so our first shade is going to be F0F0FA, which is a very light gray color. And then we're gonna use a slightly darker shade of gray, which is still going to be very light of #d0d0d5, and then we'll put a semi-colon at the end of that statement. And now we can see that we've cooled off this gray color just a little bit by giving it a little more blue than anything else. So it's just slightly blue, but it's mostly gray, but that looks really nice. So then I want to jump in and style the text in the head of these tables. If you look at the table itself we have 80 head element and inside that we have a single row with rth features and I'm just now noticing that our closing tags are in the wrong order here. Shame on me for that. So let's change that to a closing the and then the closing. Let's go ahead and make sure that all of the rest. Yeah they're all messed up. So let's go ahead and fix that. Going to go and leave that in there so that you'll know that I am only human. And there we go. So now that those are closed properly we can move on. And okay, so now we want to target these th tags to make the text look a little bit nicer in there. So let's go down to the bottom here of our CSS window and we're gonna point to panel-hyphen body. Inside the panel body, we're gonna be looking at our table Which has a class of table applied to it's are pointing to the DOT table class and then we're going to look at the TH elements inside that class. So first of all I want to give it that same Arvo fonts organize that font family to Arvo it with a backup of Sarah. We're gonna set our font-size here to 18 pixels and then we're gonna use the lighter font-weight we're gonna set that to 400. I'm gonna lighten up the color a little bit. We're gonna set it to #555 and then we're just going to center align the text. We're gonna set text-align equal to center there and that already looks a lot better with that nice Arvo fine and our text centered. And we're pretty much done with the basic look of our tables. So the way I'm going to animate these is whenever we click on one of these options that particular panel is going to move up a little bit. That we're going to brighten the background of the header and that checkmark is going to show up in the upper right hand corner. Also I'm going to add a little bit of a box of shadow to our active panels. So for now let's give our first item a class of active. So scroll all the way back up to the top and in our first panel here, we're gonna give it a class of active. So that doesn't change anything yet but we're gonna come down here in style that. We're going to skip a couple lines and I wanna create a rule for the act of class, if we want we can go ahead and get a little more specific and do .panel .active and make sure there's no space in between those two because these two classes are applied to the same item. So make sure there's not a space in between panel and .active. So for that active class I'm going to add a box shadow to the panel. Now this particular shadow is not going to be offset at all it's going to be right behind the item itself so we're not going to offset it was we've set the offsets to 0 0. It's going to have a two pixel blur and I'm going to give it a value of#999. So once we do that we can see a slight shadow around this first active item here and then that looks good. Then I'm gonna nudge it up a little bit by giving it a margin top property of -10 pixels. And as you can see, by setting that top margin to a negative value it has nudge that item up a little bit so now it's standing out even more. Then for the H3 inside that active item. Let's skip a couple lines and add a new rule for dot panel that active space H3. We're going to change the background color to a bright orange color. And there we go. Then, we're also going to point to the check mark inside that active item. Remember, in our h3, which is inside our panel heading, we have this check mark here using the font awesome icon set. We're going to point to the fa-check class inside our active item to turn that check mark back on. So we're going to point to .active .fa-check and we're gonna set our opacity here to one. So now we see what our active item is going to look like and when we click on any of these items we're going to turn that item into the active item. So let's jump into our JavaScript and make that happen. We're going to, and this is going to be very quick and very easy. We're gonna point to our .panelclass if we can spell it right. And we're going to create a click function here, so click and then it's had parentheses function. Open close parentheses, open and closed curly brackets and then inside that function. We're going to remove the active class from any existing panel, and then apply the active class to whichever panel we just clicked on. So we're gonna point to all panels using the same selector we used above, and by just pointing to that panel class we're pointing to all panels, and we're going to remove A class. Or we're gonna use the remove class method with a capital C in class and then inside parentheses and quotation marks I'm gonna type active. So we're gonna remove that active class from all panels and then for this panel the one we just clicked on so we have this inside parentheses followed or following the dollar sign. We're going to say this .addClass with a capital C and again we're gonna active there inside inside quotation marks and inside parenthesis. So now whenever we click on any of these panels, you can see that all the other panels that had the class of active on it have been removed so they're no longer active and whichever panel we just clicked on is now the active one. Now this is obviously a course of about animation we haven't animated anything yet. So that's the last little item that we need and we're going to do that in our CSS. So there's a few things we want to animate. We want to animate the background color of our h3 tags. So we're going to scroll up until we find our initial h3. Right here and we're going to give it a transition property of all .5 S. And I was going to copy that because we're going to be using that quite a bit. So, now that we've done that we can go and click on these others and see that it is fading from blue to orange and that looks good. So, I also want to animate that top margin. Remember, if we come down here to our active panel, we've given it a top margin of -10. So we're just going to look for the original panel class that we created a rule for and it is up here. So pricing space panel. We're going to give it the same transition property. So now we click and we see that it actually animates into place. And that looks really good it's just a really nice subtle animation. If you want to you can also animate the opacity of that checkmark I kind of like it that it just kind suddenly shows up there. I think it looks fine like that. But we now have a nice subtle animation that really makes this stand out and it makes it really obvious which package you're choosing. One last thing I might do here Is give us a pointer cursor when we have her over each of these panels, because right now it's not real obvious that we can click on those. So we can come up to our panel class here and give it a cursor of pointer. And now when we have or over those items it's much more obvious that we can click on those. So that wraps it up for our pricing table animation. I hope you've enjoyed that and I hope you can find some creative ways to enhance this animation and to create similar animations of your own. So thank you so much for watching and I'll see you in the next lesson.

Back to the top