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

Cancel
  • Overview
  • Transcript

5.3 Animated Panels

Hello, and welcome back to Practical Web Animation. Our next animation is going to be very, very simple, very easy to accomplish. This particular lesson isn't so much about technique, as it is about just exploring different ideas, the different design ideas, different animation ideas that you can apply to your website. So what I wanna do here is I wanna take this series of panels that we have. I wanna style them up a little bit and then create some hover effects so that they kind of pop off the page a little bit whenever we hover over them. So you can find the URL for the pen that we're starting with here in your course notes. Once you open that up go ahead and click on Fork so that we can start with a new version. And let's take a look at our HTML. So we have this div with the class of container which contains all three of our panels. And you'll notice in our CSS that container has a width of 640 pixels and it has a margin of zero auto so that it will be centered on the page. Then we have three separate panels, and they're all contained inside divs with a class of panel as well as a second class of panel hyphen and then whatever background color we're going to apply to that particular panel. Then we've got some simple text, a font awesome icon, and some paragraph text below that. And you can take a look at all of the starting CSS just to see the styles that we've applied to it already. So now let's jump into those panels and style them separately. So you'll notice we have a panel-blue class, a panel-beige class, and a panel-orange. So underneath our panel last child, we'll go to the next line and we'll create a rule for the panel-blue class. And I'm gonna give this background color. Let's go ahead and first of all minimize our JavaScript. We're not gonna need that for this particular lesson. And for our background color for the blue panel, we're gonna give it a value of 58878c. For our second one which is the beige one, has a class of panel-beige, we're gonna give it a background color of d9caad. Finally, we're gonna move down and create a rule for the panel-orange class. And we're gonna give it a background color of c36d42. And there's our orange color. Now since we do have kind of a darker background color on a couple of these, let's go into our panel rule here and let's add a text color of white and that brings it up quite a bit. Now the one in the middle with the beige background, we might wanna keep that one a darker shade of gray. So let's go into the panel-beige rule here. Let's also add a text color of 242424. It will give us a dark gray color, but I do wanna make sure that the icon itself has a text color of white. So let's go ahead and skip a couple lines here and let's point to our panel class, and inside that panel class we're going to point to the .fa class because all of our fun awesome icons have a class of fa. So for that, we're gonna give it a color of white, as I mentioned, and then let's bring up that font size quite a bit. So we'll set font size here to 60 pixels. We're just gonna have these nice large icons there. Another thing I wanna do for the panel itself is I wanna add a little bit of padding to it because all the text is right up against the edge there. So let's go back up to our panel class here and let's add ten pixels of padding and that gives us a little bit more space around our text. So now I wanna get a little creative with our headings here instead of just having this heading right in the middle of our panels. I want to kind of put them on what looks like a little bit of a label that's hovering a little bit offset from the panel itself. So let's create another rule at the bottom for .panel space h3, so we're gonna style all of those h3 elements inside our panels. So let's start by giving them a dark gray background color of 242424. And then we'll give them all a text color of white. And I don't want it to be bold, so I'm gonna set our font weight here to normal. And I'm gonna set our text transform to uppercase. That looks pretty good. I'm gonna bring the font size down a little bit to 14 pixels. That looks a little bit better. And let's add a little bit of padding here, so we're gonna set our padding to four pixels top and bottom and 14 pixels left and right. And then I'm gonna change the display. I don't want these to be block level. Instead I'm gonna set them up to be inline blocks. So we're gonna change the display property here to inline-block. And that brings down the width of these panels. And you'll notice that it messes with our icons a little bit. But that's okay, we'll get to that in a few minutes. But for now let's keep working on these h3 tags. So by default, these h3 tags are gonna have a lot of margin on the top, and I want to decrease that quite a bit. So I'm gonna to set our margin top to about two pixels. And you'll notice that pulls these up towards the top of our panels. And then I also want to pull them over to the left so that they're kind of hovering over the edge. Right now everything is center aligned, and I don't really want that for these. So what I might do is instead of setting the text align to center for our panel class, let's go ahead and cut that. Let's set that for the paragraph class or the paragraph element inside the panel, so we'll point to .panel p and we'll set our text align to center there. And I also want to set it for the font awesome icon, so I'll just type comma space and then .panel space .fa. And that's not gonna work for the fa element just yet, because that fa element by default is it's just an I element. So it's an inline element. Let's change that to a block level elements. We're gonna go down to this fa rule here and we're gonna set this play to block, and now it should center just fine. And that also nudges that icon there below our h3. So that gets a little closer to where we want to be. So now what I wanna do, now that h3s are longer centered, as I want to pull them over to the left so that they're hovering over the edge of the panel a little bit. So I'm gonna come back down to our panel h3 rule. I'm gonna set our positioning for this h3 to relative, so that we can change the left position here. And I'm gonna set it to negative 12 pixels, and that will pull it over so that the left edge is kind of hanging over the edge of the panel. And so that gets us where we're going with the title itself. Now I wanna make sure that all of our panels end up being the same height. I'm also going to resize this a little bit so we can see it a little better. So right now if I were to put some more text inside one of these paragraphs, you'll see that that particular panel becomes taller than the rest. And I don't really want that, I wanna make sure that they're all gonna stay the same height. So for our panel class, I've given them a width of 200 pixels, I'm also gonna give them a height of 200 pixels. So now they will all definitely be the same size. Now, when you set the height like that, when you hard code the height, you wanna make sure that the text you put inside those panels is not gonna be too much. Otherwise, it's gonna overflow past the edge, the bottom edge of that panel. So you wanna be careful when you're setting a hard coded height to an item like this. So that gives us our basic setup for our panels. Now I want to animate them, so that when I hover over each of these panels it lifts up off the page and gives us a nice shadow behind it. So what I'm gonna do is I'm gonna create a transition on the panel class. And we're gonna set all and let's make it take one second. So all space 1s and then over to the next line and will point to panel colon hover. So when we hover over that, first of all I'm gonna move it around a little bit. I'm gonna take the top position and set it to negative 20 pixels. Now that's not gonna do anything right now. If you were to hover over these, we see that nothing's happening because we haven't set the position for our panel. So inside the panel rule, let's also create a position property and set it to relative. And then we also need to set an initial top property to zero, let's also do that for the left property as well. So now we should see those animate up as we hover over them. So that's our first step. I'm also gonna animate the left property as you might have guessed. So we're gonna set the left property to negative six pixels. We're just gonna move it over to the left a little bit. And now we see it moving up and over. And then I want to add a box shadow to it as we hover over it. So we're gonna set a box shadow property here. And we wanna set this box shadow in place where our panel originally was. So for moving our panel to the left six pixels, we wanna move our box shadow or offset the box shadow to the right six pixels. And then our second value is gonna be our vertical position. And since we're moving our panel up twenty pixels, I want to offset this down twenty pixels. And then after that, we're gonna to set the amount that we want it to blur, and I want to blur twenty pixels. We're gonna blur it quite a bit because it's coming off the page quite a bit. And then we're gonna set the color for it. And I'm just gonna use an RGB value here of medium dark gray. So we're gonna use a value of 100 comma 100 comma 100. So that creates our box shadow. And when we hover over it, it doesn't give me exactly the look I'm going for. I mean, it doesn't look terrible, but I want it to look darker initially. And right now it's just kind of slowly fading in. So in order to get the effect I'm going for, I'm gonna create a buck shadow up here as well in the original panel class. So just before that transition will go ahead and create our original box shadow. So this is gonna be the setting for box shadow before we hover over it and this one's going to have a bunch of zeros on it. So our x and y position is gonna be set to zero, zero. We're not gonna offset it at all initially. And we're also not going to add any spread to it at all. So we're gonna set that to zero as well. Then we're gonna set our RGB value here to zero comma zero comma zero which is just solid block. When we do it this way, since we're starting with solid block, we're starting with no blur at all, when we see the animation, we're gonna see it starts off dark and then lightens up as the animation occurs. And we can already see that happening. So initially you can't really tell that there's a box shadow there at all. But that gives us a better hover effect by creating that dark shadow underneath it, whenever our page first loads. So that's just one of many other types of affects you can create with just a little bit of CSS. We didn't have to touch JavaScript at all with this. This was done all in CSS. And one more thing we might do is just slightly round the corners a little bit of our panels. I might jump up here and give it a border radius of something really small, maybe four pixels. And you'll see that that just softens the edges of the corners there just a little bit the way that looks. So as always, I want you to experiment and play around with that as much as you want to. But that's just another example of the types of animations you can create for your website that aren't in your face. They're nice and subtle but they do add a lot to the page. So thank you for watching and I'll see you in the next lesson.

Back to the top