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

6.2 Image Animations

Hello and welcome back. In the original practical web animation course, we had a few image animations that dealt with hover effects. When you hover over an image, we'd see a little animation that occurs. And I wanna do something similar in this new bonus lesson. But it's just a very subtle, simple image animation that occurs when the page first loads. So the user doesn't have to do anything to interact with the images here. It's just gonna be a, again, a simple animation that occurs when the page loads. And our HTML for this is gonna be very simple, we're gonna have a couple of divs here, and I'm gonna give our outer div here a class of img-row. And then inside that image row class, I'm gonna have three more divs, and these divs are going to have a class of img-container. And I'll hit Tab to fill that out. Actually I'm gonna undo that, and I'm gonna wrap this in parenthesis, and do a times three here and then hit tab, and there we go. So I've got three more divs here, and I'm going to go ahead and put some space in here, because we're going to add some images inside these divs as you might have guessed. And we'll stretch that out a little bit, so we can see it better. And I'm just gonna grab these images tags from elsewhere and paste them in. We'll stretch that out a little bit more, there we go. So again, I've got three images here that we're gonna be using, and again we're just gonna add a very subtle animation into these images. Just to add a little bit of interest and movement to the page. And we'll paste our third one right here and there we go. So we've got three images and we'll scroll through to see those, these nice little nature images. And a lot of what we do now is gonna be in our CSS. Now the animation here is actually going to occur in jQuery and so before we forget, I'm gonna go ahead and jump over to our Settings here in Code Pen. And I'm gonna go to the JavaScript tab and I'm gonna do a quick add of jQuery, don't wanna forget that. So let's go back to our CSS here and remember our img-row class, that's our containing divs so let's go ahead and create a rule for that. So .img-row and here I'm gonna set our width to 940 pixels. And I'm gonna set our margin to 0 auto, to automatically center it. And then for our image containers, img-container. Remember these are the divs that contain the images themselves, I'm gonna give them a width of 300px and a height of 300px, and I'm going to make these into circles. So I'm going to first of all hide the overflow, so we're gonna set our overflow property here. To hidden. And then we're going to make it into a circle by setting a border radius on it. Border-radius. And I'm gonna set that to a value, it needs to be at least 1/2 of the width and height. So we'll do 150px for our border-radius. And now we can see that those are circles. So now I just want to float those to the left. So we'll do a float left and I'm gonna do margin right of 20px. And that's gonna break down to the next line here, because of the margin right on this third image. So for this last one. We'll do .img-container:last-child, and we're just gonna set our margin-right for that last-child to 0. And there we go, now it's no longer broken. And then it looks pretty good. So those are our three images. But I wanna do a little bit more here. Basically what I wanna do with this animation, is I want these images to start off large. And they're basically gonna get smaller as time goes by. So over the first ten seconds or so of the page load, we're gonna see these images get smaller and smaller until they fit perfectly inside these circles. And so again we're gonna start large. And I want to animate these from the center. I don't want to, right now if we were to just change the size of this it would animate up from the lower right-hand corner. And that's not really what I want. I want it to animate from the center, so the first thing we need to do is to put these images in the center, and right now our divs here are 300 by 300px, and our images are 500 by 500px, so that gives us a little bit of room to work with. So I want to position these images using absolute positioning, and then we'll nudge it to the left and then nudge it up a little bit. But in order to make that positioning work right, we need to set the parent element's position to relative, and that's gonna be our image container. So our image containers can have position of relative, and the image itself will have a position of absolute. So inside the image container rule, we'll set our position to relative, and then we'll create another rule down here for the images inside our image container, so .img-container img. And here, we're gonna set our position to absolute. And as you can see, nothing changed yet because again, the parent's position is set to relative. So now in order to center it, we just need to change the top and left position. But first let's go ahead and set the width and height. The width and height of the image themselves is 500px, but I do wanna set it here as well. So we're gonna set the width to 500px and the height to 500px. And then we'll set the top value and in order to center these, remember this is 200px wider and taller than the div that it's inside. So in order to center it, we just need to move it to the left 100px and move it up 100px. So our top is going to be at -100px, and the left value is gonna be at -100px. And that will center those images within those circles. So then all that's left to do is to jump into JavaScript and animate the images. So we're gonna be animating both the position and the size. We're gonna animate the size down to 300 by 300, because remember right now they're 500 by 500. And then we're gonna animate the position to a value of 0, 0. So the position right now is at -100, -100. We're gonna animate that to 0, 0 as we animate the size down. And that's gonna give us the effect of zooming out from the center. So we're gonna do this in jQuery. And we've already included jQuery in our project, so it should work just fine. So we're gonna point to the images inside our image container divs. So we're going to use the jQuery selector with the $ in parenthesis. And then quotation marks. And inside those quotation marks, we're going to type in our CSS selector for those images. So we're gonna point to .img-container img. So again the images inside those containers. And we're gonna use the jQuery animate function. So the way that works is we type .animate (): to end your statement. But then inside those parenthesis. We're going to include an object that contains all of the objects we're gonna animate. So that object is created using curly brackets, and we'll nudge that curly bracket down a couple of lines. And again, we're gonna animate the widths. Remember, we're starting at a value of 500px. We're gonna animate down to 300px, so that it will be the same width as the circle that it's inside of. So then we'll type comma go down to the next line, and we're gonna set our height to 300 as well. So height: 300. And we see our height animate down to 300px. And then as you can see, it's a little too high and a little too far to the left, because we've set our top and left positions to -100px, so we just need to animate those to a value of 0. So we'll type comma. Go to the next line and we'll set our top value to 0, next line. And then we'll set our left value to 0. And there we go. So right now we can see this animate very, very quickly, and we can right click on that and reload that frame if we wanna see it again. And obviously we don't want it to occur that fast, I want it to be a lot slower. So after that closing curling bracket for our object but still inside our parentheses here, I'm going to type And then we can enter in the duration of this animation in terms of milliseconds. So if we want it to last ten seconds, that's gonna be 10,000 milliseconds. And now we can watch our animation take place slowly over the course of 10 seconds. And that looks pretty good, it's a nice little subtle effect for when your page first loads. Now, with slow effects like this or slow animations like this I should say, sometimes they can be a little bit choppy. Especially at the beginning and end of the animation, when it's slowing down or speeding up. And there's a weird little trick I've found for fixing that, or at least smoothing it out a little bit. And the way we do that is just after our jQuery selector, but before animate, I'm gonna say .stop(). When we do that and then watch our animation again, there's still gonna be a little bit of choppiness but for some reason that seems to help some times with smoothing that animation out a little bit, so it's not quite as choppy. But once again, that's how you can create a subtle image animation that occurs when ever your page first loads using CSS and jQuery. Thank you for watching and I'll see you in the next lesson.

Back to the top