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

7.1 Background Animation

Hello, and welcome back. The next three lessons are bonus lessons in the practical web animation video course. And in this first lesson, we're gonna be talking about the creation of a background animation. And we're gonna have a background that's going to slowly, basically just animate in size. It's gonna grow, it's gonna shrink underneath the the content that's gonna be above it. And this is a pretty easy effect to achieve, but there are some things we need to keep in mind as we do it. So let's start. We're starting with a blank CodePen here. I'm gonna start by creating a div that contains our background. So I'm gonna set the ID here to bg. And then, we'll put our closing div tag. And then, after that background div, that's just gonna be an empty div. After that div, we're gonna have another div with an ID of main-content. So in our main-content div, we're just gonna have some very simple content. We're gonna put an h1 here. And in that h1, we're just gonna say CSS animation. And there we go. That's really all we need for our HTML here. Now, there are a couple of ways we could animate the background. And there's a particular reason I've chosen to do it the way I did it. One way we could do it is to just forget about this empty bg div, and put a background in our main-content, and then just animate the background size of that main-content background. However, animating the size of a background can get a little bit tricky, especially when you're dealing with different browser sizes. If you create an animation like this and you're animating the size of the background at one browser size, it might look really good. But then, as you resize the browser, you might see the image start to repeat or you might see that it doesn't fully cover the the width or the height. And you can certainly use multiple break points to handle things like that, but it's much easier to do it the way that I'm about to propose. So the way that I'm proposing is that we just have this completely separate div, and we will stretch this div out so that it's the full width and the full height of our browser window. And then, we'll just animate the size of this div. We'll set the background on this div. We'll set the background size to cover to make sure that we don't see any repetitions of our background. If we use cover, it will cover the entire area. So we'll just set the background size to cover, and then we'll just grow and shrink this bg div, and the background will grow and shrink with it. So let's talk about how we're gonna make this work. We're already done with our HTML, so we can jump down to our CSS window, and I'm just gonna paste this import of this livvic font that you can find on Google Fonts. And the body of our document is going to use that font. Now, there's a couple other things I want you to take notice of. I'm also gonna create an HTML rule here and set the height to 100%. So we set the height of the HTML to 100%. The height of the body to 100 %. That way, we can make sure that when we stretch out the bg div that it takes up the full width and height of our browser window. By default, our body's not gonna be a full 100% unless we fill up all that content. So we set the height to 100%. We set the height of the HTML element to 100%. And then, we've set the display to flex. And then, align-items and justify content to center so that we can get that text horizontally and vertically centered on the screen. Then, I'm gonna go into our h1 element here and add a couple of rules here. We're gonna set our color to a value of 43607e. And I'm gonna set text-align, actually, we don't need to set text-align, it's already centered. But let's set letter-spacing here to a value of 0.8em, and that will spread the text a little bit, and that looks a lot better. So what I'm gonna do is I'm gonna put a background behind our image. And I found this background in the assets section of CodePen. If you go to Photos, you can actually do a search for photos on Unsplash website. And I just did a search for clouds. And I've already got the URL ready to go. So we'll look at that in just a second. But let's create a new rule for our bg element. So I'm gonna start of by giving our bg element a background color of red. Just so that we can see it. We're gonna change that later. But we're gonna set the width to 100%. We're gonna set the height to 100%. And since we set the width and height of our HTML and our body, you'll notice it does take up the full height. So that works out well. Now, we also wanna make sure that this shows up underneath our h1 element. So we're gonna set the position here to a value of absolute. And then, we can talk about the background image. So I'm going to copy and paste a few rules here for our background image. There we go. And now, we can see the clouds in the background. I'm also gonna get rid of this background color of red. And there we go. So out background image, again, this was pulled from unsplash.com. You can access those through your assets. And then, I've set the background to cover, as we talked about before. And the background position to center-top. So the top of the image is at the top of the browser window, and it is horizontally centered. Now, one thing you'll notice is that when we set our position to absolute, our main content div, which has our text in it, disappeared. And the way we get that to reappear is very, very simple. We simply need to give it a position property. So I'm going to skip a couple of lines here and create a rule for the main-content div. And we're gonna set its position, and we don't wanna move it around, so we're just gonna set it's value to relative. There we go, if we can type, we can get that working. Okay, so there we go. Now, we can see the text on top of the background image again. And we can test that at different browser sizes. And maybe we do want to set that text to be centered so that when we get down to a smaller size, it doesn't just bunch up against the left edge here. So for our h1, let's go ahead and set that text-align to center. And that way, when we get to a smaller browser size, it still looks good. Okay, so now, all we need to do is to animate the background. We've got everything in place, we've got it all where we need to be. And remember, when we animate the background, we're actually just animating this big div. So we're gonna animate the size using the transform property. So let's create a keyframes animation. And the way we do that in CSS, let's just go down here to the very bottom. The way we create a keyframe animation is we type at keyframes, and then we give our animation a name. Let's just call this bganim for bg animation. And then, we can set our keyframes here. You can set keyframes at 0%, 50%, 100%. We're just gonna do 50%. And we'll do another keyframe for 100%. So for the 50% animation, I want to scale it up a little bit. So we're gonna set the transform property, and we gonna use the scale value here, and we're gonna set it to 1.3. And that will set it to 130% of it's original width and height. Then, we'll do the same thing down here, we can just copy and paste that. And when we get to 100%, we're just gonna set it back to a value of 1. So by default, at the very beginning of the animation, at 0%, scale is just gonna be set to 1 by default. So it's just gonna be its normal size. Then, over the course of the duration of the animation, we're gonna scale it up to 1.3. And then, for the second half of the animation, we're gonna scale it back to a value of 1. And I want this to be a really slow animation. So I'm gonna make this last about 20 seconds. So what we need to do in order to trigger this animation is we need to point to this animation on the element that we're actually animating. Which, again, is the bg element right here. So in the bg element, I'm gonna use the animation property to point to this keyframes animation. So animation colon space, and then the name of the animation is what we put next. So we called that animation bganim. And then, we need the duration of the animation in seconds. And the way we type that is the number of seconds, which in this case is gonna be 20. And then, the letter s, a lowercase s there. And then, we want this animation to loop. We can already see that animation happening. We can see it growing, and then in a moment it's gonna start shrinking again. But we wanna make sure that it loops over and over again. If we wait til the end of the animation, we're gonna see that it just stops. And then, we won't see anything else. But we want that to keep going. So I'm simply gonna add the keyword infinite there to the end. That way, it will just loop infinitely over and over again. So you can watch that animation expand and contract as I continue to talk. But that's basically how you create a background animation. It's one of many ways that you can create a background animation that's constantly just moving very subtly in and out. So again, the name of the game here is subtlety. You don't wanna move it too fast or it's just gonna be too distracting. But I think that looks really good. So thank you for watching, and we'll see you in the next lesson.

Back to the top