FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 More Animations

Hello, and welcome back to scroll events made easy. For our next wow.js trick, I'm going to create a couple of columns of text, using the Bootstrap weld class that we've seen before. So here's our last column, which contains an image in it, so we're gonna go to the end of that column. And then the next closing div is the end of that row ,and I'm wanna create a new row right after that. So I'll create another div tag with a class of row, and this row is gonna have two columns in it. So I'm gonna create a div with a class of col, and i'm gonna use the xs, or extra small class this time, and we're gonna set it to xs-6. So no matter what size the browser is, each of these columns is gonna take up 6 columns of the 12 column grid system, or half of the width. Inside that column, I'm gonna create a well, so we'll create a div with a class of well. And inside that well, we'll have a couple of items. We'll have an h4 tag with some kind of title in it. We'll say Text Content. And then inside that h4 we'll have some more lorem ipsum paragraphs. So we'll type out Lorem, Tab, to enter that in. And there we go. So we have this column here, and I'm just gonna make another copy of it so that we have two of them, and we'll save our file. So I've made a new folder, by the way. We're now in the site 08 folder, so all of the changes we make in this lesson will be saved there. And then we'll jump back over to our browser, which is now pointing to that site 08 folder. And I'll refresh the page, we can see our initial animations. And then as we scroll down, we can see our two well items here. Well, one thing I wanna do, just because of the screen resolution and all this, is I want to first of all go into the container class and override its maximum width. Right now, if we go to our page and just right click somewhere and inspect. And then I'm going to click on this div with a class of container here, and we can see that it has a width of 1170. I'm going to click inside that and then hit my scroll wheel, and scroll down and watch this get smaller. I think I'm going bring that down to about 900 pixels wide. And then even at that width, you'll see that our images resize because we gave them that image responsive class that Bootstrap provides for us. So yeah, let's bring that down to 900 pixels. So let's go into our CSS file, main.css, and we'll create a new rule for the container class and give it a width of 900 pixels, and that'll actually be a max-width. Let's change that to max-width, there we go, save that, jump back into our page and refresh, and there we go. Now it's not taking up so much of the width, and we can still see those animations as we scroll down. So now let's create an animation for our two wells here, and we've seen, let me close this here, we've seen the bounce in class. And let's go back to index.html. We saw this bounceIn class here, and we saw what that did. It just made our images kind of bounce onto the stage. And there are a couple other classes that allow us to specify a direction for bouncing. So for this first well here, or for the row, I'm sorry, the column associated with it, I'm gonna add the class of wow, don't forget that one. And then we'll create a class or add a class called bounceIn with a capital I and Left with a capital L. And then for our second well, we're gonna do the same thing. We're gonna add the wow class, I'm sorry, not for the well, we're gonna do it for the column. We'll add the wow class, and then we'll add a class of bounceInRight. And so, as you can imagine, these will be bouncing in from different directions. So if we save that, jump back into our browser and refresh, we can see that happening. Let's refresh again and then scroll down to it. Once we get down to that scroll height, we can see one of them comes in from the left, and one of them comes in from the right. So let's jump back into our code. And since you're probably sick of watching me type in a bunch of HTML, I'm going to just copy and paste some more HTML, and we'll take a look at what it's going to do. So everything else I have is going to be in another row below this row, so this is our closing row div tag. So we'll hit enter just after that. But just before that closing container div tag, and then we'll paste a bunch of code here. And you're welcome to go through and type it all in yourself if you want to, but that would take awhile. So here's the start of that second div. Let's take a close look at the HTML. So our first div here has a class of col-sm-4, so it's gonna be one-third of the width, unless you're at a super small size, then it'll take up the full width. And we're using that same bounceIn class that we saw before, but we have something extra, so we have a class called img-container, and then we have an image inside that. But there's also an h5, and this h5 also has an animation applied to it. And this animation is called fadeInDown, and we will see what that does in a second. But you'lll see that we also have a delay added to it. There's an attribute we can add called data-wow-delay, and the value we've entered in here is .25s, which means .25 seconds or one quarter of a second. So each one of these items is going to have a small delay of a quarter second after we scroll up to them before they start animating on. But also illustrated in this example, is this idea of nested animations. So we have this column here that has an animation applied to it, this bounceIn animation, but the h5 inside that column has another animation applied to it. So the column itself is just gonna do the regular bounceIn, which is the very first animation that we saw. And then the one inside it is going to be this h5, just a little bit of text that's going to fade in and move down with a short delay. So this first animation will occur as soon as we scroll to it, this bounceIn animation. And then a quarter second after that animation starts, because of this delay here, the inner animation is going to occur. So let's see what that looks like. Let's save our file, jump back into our browser. I'm gonna scroll up to the top and refresh. So we see our initial animations here, we see our text content sliding in from the left and right, and let's scroll down just a little bit further to see what happens. So we saw these three items bounce in, and then just a quarter of a second afterwards, another animation started with this text here. But I want this text to work a little bit different. I'm going to add some CSS to our page. Let's go to brackets and let's go to our main.css file. And I want to position those h5's over our images. Just like we did before with the parallax.js project, where we had some text hovering over an image with a semi-transparent background behind it. So I'm going to skip a couple lines after our container rule here, and I'm going to create another rule for the image container class. So all of those images are inside a div with a class of image container. And I'm just gonna set its position to relative. And the reason I'm doing that is because the items inside it are gonna have a class of absolute. But I don't want them to be absolutely positioned relatively to the entire page. I want them to be absolutely positioned within the parent container, and the parent container is this image container. And so we need this to have a position of relative in order for the positioning of the text inside it to work right. So now, we're gonna create a role for image-container h5. We're gonna point to those h5 elements inside that image container class. So first of all, I'm gonna give it a background color. I'm gonna give it a semi-transparent black. So I'm gonna use an RGBA value 0, 0, 0 that will give us the black, and then comma 0.5, that's gonna be the opacity. So it will be 50% opaque. So then we'll set that text color to white or #fff. You can either write out white or you can write out #fff, whatever you prefer. I'm going to change some of the other settings. We'll set the font size to 18 pixels. I'm going to set the padding for this item to 10px by 5px. So the top-bottom padding will be ten pixels, the left-right will be five pixels. Then I'm going to center-align the text, so we'll set the text align value to center. I'm going to position it absolutely so that we can put it where we want over that image, and then I'm going to move it down 50% of the way, so that it's hovering right over the center. So we're going to set the top value to 50%. That's going to be 50% of the parent container. And if we move it down 50%, it will actually be a little more than half way down because the top edge of it will be 50% down. So I'm also gonna move it up a little bit by setting the margin-top property, to a negative value. We'll move it up about 10 pixels. Then we'll set the width of that item, of that h5, to 100%, so that the background takes up the full width. And then we'll just set text-transform to upper case, just to make all the letters uppercase. So let's save that and let's see how it looks. So we've just tweaked the styles a little bit. And if we jump back into Chrome, scroll back up and refresh, now when we scroll down to those items, we can see a much more eye-catching effect. So again, if we refresh again, as we scroll down, we see the bounce animation first, and then shortly after that the fade animation starts, and as it fades in it's also moving down. So let's go back into our page, and let's take a look at what else we've pasted here, cuz we've just looked at the first few. So after the first few we have a few more regular bouncing animations, and that's just to take up a little more room on the stage. And we'll keep scrolling down past all of these bounceIns. And then you'll see that we have something called wow pulse. And that's a pulsing animation, and we'll see what that looks like in a second. But you'll notice we also have this attribute called data-wow-iteration, and it's set to 5. That means that this pulse, or this pulse animation we're creating, is going to repeat five times. Then, just below that, we have this fadeIn animation with another attribute called data-wow-duration. So we've seen data-wow-delay, data-wow-iteration, and now data-wow-duration. So if we don't set a duration, it will default to a certain value. It will, by default, last a certain amount of time. I think it's one second, but I don't know that for sure. But if we set the duration to a different time, say 5 s for 5 seconds, then that fade in is going to take 5 seconds to occur. And as we scroll down we can see that it's just a few paragraphs of text here. And all of those paragraphs are contained inside this column, so it's all of this text here that we're gonna see fading in over the course of 5 seconds, and we're also gonna see the header above it pulsing as that happens. So let's jump back into our browser and let's watch that happen. So I'll scroll back up to the top and refresh, and then we can see all of our animations coming in, we can see our nested animation here. And then as we get to the bottom we see our text here pulsing, and then the paragraphs below it faded in. So let's scroll back up, refresh again, and let's watch that happen again. We'll scroll back down, and there we go. So it takes five seconds for that fade in to happen, and as we can see, that pulse keeps happening until it has repeated five times, and then it's done. So those are just a few examples of the types of animations you can create using this wow.js framework. And as you can see, it really only takes one line of your own code. And unless you count the JavaScript function that we're wrapping it around, then technically, it's three lines of code. But still, that's pretty amazing that you're able to do all of this without typing any of your own custom JavaScript. So thank you for watching, and I'll see you in the next lesson.

Back to the top