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.4 Panels and Bullets

Hello and welcome back to practical web animation. In this lesson we're gonna start on a new animation effect and what I want to do with this one is I want to animate these three panels onto the screen one at a time whenever the page loads. And I've used to bootstrap for the main mark up in the structure, so, if you look in your html, you can see the typical containers, rows, columns. We're using the bootstrap panel class as well, so that if we come over here and look at our CSS you'll see that there's very little custom CSS that I had to write to to fill all of this out. All of that is taken care of mostly using bootstrap markup. So each of these panels is gonna have a panel heading that's inside a div and inside that panel heading we have an h3. And then below that we have our panel-body. Again all of that is Bootstrap Markup. You'll also notice that we do have some fan offers some markup as well so we have these check boxes here. Those are all then using fan. So if we jump into our settings for this particular Pen, if we go to our CSS you can see Bootstrap and font awesome and if we go to our JavaScript we can see jQuery and then the JavaScript for Bootstrap. So the URL for the starting pen can be found in your course notes for this lesson. Once you open that up go ahead and click on fork to create a new copy of it and we'll get started with this new copy. So everything that we're gonna be doing from here on out is mostly gonna be in JavaScript. We are gonna add a little bit to our CSS to get everything working like we want it. But most of it's gonna be in JavaScript. So what I want to do first of all is animate our three panels in and we're gonna animate them in kind of a staggered effect. Through all three going to come in and animate kind of at the same time but we're gonna start with one and then the next and then the next. So, let's start by creating a variable to store our three panels in. And let's give ourselves a little more room in our JavaScript here. So let's create a variable called panels. And we're gonna use jQuery to point to these panels, and they've all been given a class Of panel. So using our jquery selector, dollar sign, parenthesis. Inside those parentheses we're going to have quotation marks and inside the quotation marks, we're going to have our CSS selector, which is .panel. We're going to point to the panel class. So that variable will store all of the items on our page that have the panel class applied to them. Now keep in mind if this is part of a larger page and you have other panels on that page that you don't want to animate in with these, then you might need to create some more classes or use some more specific selectors, but for now we're just going to stick with .panel. So let's go ahead and put a semi-colon at the end of that statement, and then let's skip a couple lines. So let's start pretty simple here and let's just animate all three of these on at the same time using jQuery's each method. So the way we do this is we're gonna point to the items we're gonna animate which we stored in this variable called panels and we're gonna say panels.each and then inside the parenthesis here we're gonna create the function that we want to run for each of these panels that we're talking about. For each of the three panels that we see on our screen here. So we're going to use jQuery's animate method to do this and the first thing we need to do is to point to the item that we're animating, so we're using the each method again but inside this each method we need a way to point to each specific item. And the way we do that is using the dollar sign this inside the parenthesis. And so that will point to whichever specific panel we're talking about in this particular iteration of this each method and we're going to animate it. So we're going to say, (this).animate and then after animate we need a set of opening and closing parentheses, and opening and closing curly brackets. I'm gonna nudge that closing curly bracket and closing parenthesis down a couple of lines, and put a semi-colon at the end. Then inside the curly brackets, we need to include the properties that we're gonna animate. So right now we have our three panels in their final resting place. This is where they're gonna end up after they animate. But initially, I want them to be up past the top edge of the screen. So I'm gonna go back into our panel rule here, and I'm gonna add a couple of properties. First of all, we need to set our position to relative so that we can move this around using the top position and then we will add the top property here and I'm gonna set it to -50 pixels and that should move all of them up a little bit. We're not moving them all the way up passed the top but we are gonna move them up 50 pixels and we're going to make them invisible by turning the opacity down to zero. Now they are completely invisible and we can get started with our animation. So there are two properties that we're gonna animate and you might be able to guess what they are. We're going to animate the top property and in our animate function, we need to put this value inside quotation marks. So we're gonna type zero pixels, we're going to animate it back to a value of zero. Then I'm gonna put a comma after that and then our next property is going to be the opacity. We're gonna bring that opacity back up to one. So they all animate in at the default speed. If we want to specify the speed we can go down to the next line here just after the closing curly bracket but before the closing parenthesis and type comma and then the duration that we want this animation to last. And this is going to be in milliseconds. So I'm going to type 800 here which will give us 80% of one second or .8 seconds that way we can specify exactly how long we want that to last. So we see that happen, it all happens at the same time, it's kind of boring though, because they're all just animating at the same time and what I really want to do is I want to stagger them. So let's say we want to stagger these by half a second. So the first one will start coming in, and then once half a second passes, the second one will start coming in, and then the third one. So I'm gonna create a variable before our panels.each method. And I'm gonna call this Delay, and I'm going to set it equal to 500. Then, I'm going to create another variable, which is kind of going to be our counter, I'm just going to call this i and I'm going to set it equal to the value stored in delay. So, initially, i is going to be set to 500 because delay is set to 500, but after we run through this Each function the first time, I want to increase the value of i by the value of delay. So I'm going to increase i by 500 every time we run through this function. But first we need to figure out how we're gonna use this counter variable. Well one thing we can do with our animate function is before we actually run that animate function we can run a function called delay. So what I'm going to do is I'm going to save this .delay, and then inside parentheses we would put the amount we want to delay the start of this animation. So 500 and then immediately after that closing parenthesis there we have .animate. So notice there are no spaces here. It's just this .delay50.animate. The problem now is they're all being delayed exactly 500 milliseconds or exactly half a second. So they're still all coming in at the exact same time. So instead of using this hard coded value of 500 here, I'm going to point to our I variable and then after we create this animation we'll go to the next line here and we're going to increase the I variable by the amount stored in our delay which is 500 milliseconds. So now we can see they're all staggered as they come in. Now if we want to we can have the first one come in immediately. Right now the first one is still delaying half a second before it starts animating and then the second one another half second. So if we want the first one to come in immediately and then the second one to come in half a second later, all we have to do is start out by setting i equal to zero. And then when a page refreshes, we really don't see that much of a difference. The difference is that it immediately starts animating instead of waiting. However, I do want to keep that initial delay there. So the page loads. It gives the user time to see the page load, and then they see this nice little animation coming in. So now we have our three panels animating in, but now I want to make it a little more interesting by animating all of these line items in one at a time. And we're gonna use kind of the same delayed effect to get those to come in, but we're gonna do it again on the list items themselves. So just like we did with our panels up here at the top, Instead of putting in a semi-colon here going to put a comma, go down to the next line and create another variable called items and I'm going to set that equal to panels.find and we're going to find all of the list items stored in all of these panels. So now all of these list items where we see all of these check marks, all of those are stored inside this item's variable. And then don't forget to put your semi-colon at the end of that line. So then we can come back over here and let's come down here to the bottom. And then we'll point to panel space li. So for all of these list items inside of our panel, first of all, we'll set the position to relative, so that we can move these around a little bit. We're gonna set the left position to a value of 50 pixels, and you'll see that nudges everything over to the right 50 pixels. What we're gonna do is we're gonna make all of these invisible and then they're going to animate back in to their original position whenever we jump back into our jQuery. So we set our left value to 50 pixels and our opacity for these to zero. So now those enlist items are invisible and we can animate them in. So we're gonna do something very similar here, except we need a different delay value. I want this particular delay to be smaller. So let's change this from delay to panelDelay, since we're gonna have two different delay values. So we'll set panelDelay to 500. And then when we refer to panelDelay down here, we need to change that as well. i += panelDelay. And then we'll skip a couple lines and we'll do the same thing that we did here but for our list items. So we can actually copy all of this code, it's going to be very very similar and then we'll skip a couple of lines and paste it. And we just need to change a couple values here instead of panelDelay now, we're going to have item delay for our list items. We could call it li delay or whatever we want. So let's copy that name there and then paste it down here so that we're actually increasing it by that value and instead of increasing it by 500 each time we're going to increase it by 200. So, the delay between these list items is going to be much smaller than the delay between the panels themselves. Secondly, our starting value. I want that to be quite a bit higher, because I don't want these to start coming in until the panels have mostly finished animating and so I want this to last about or this initial delay to start off at about 1200 milliseconds or 1.2 seconds. So you're going to see our initial delay here is set to a value of i, but now we need to point to items instead of panels. So we're gonna replace panels with items and then we have items.each and we're not animating the top value anymore, Instead we're animating the left value back to a value of zero pixels. And then one more thing you need to do here's I need to change the name of this variable because we already have a variable called I, we're gonna change the name of this one to J. It's gonna change this to j as well, and then we're going to say j + = itemDelay. Now, I'm still not seeing the animation occurring, I bet if we scroll back up here we forgot to change a variable somewhere and yeah, here's our delay. We've had to change that to panel delay, so let's copy that and paste it there. And now we see everything start to animate in.So let me make a little more room for this that we can see it a little bit better then I'm gonna hit Command+Shift+5 to refresh that. Sometimes Command+Shift+5 work sometimes it doesn't someone click on Save and then I'm gonna refresh the whole page and will just watch it from scratch. Let's resize that. And now we see those animate in and not only do the panels come in one at a time but the items inside those panels also come in one at a time. And so that's just a really nice way to create a staggered animation using jQuery we staggered not only the panels but also the list items themselves. So thank you for watching and I'll see you in the next lesson.

Back to the top