2.5 Parallax Cover Section
1.Introduction2 lessons, 05:01
2.The Projects10 lessons, 2:27:30
3.Conclusion1 lesson, 01:18
2.5 Parallax Cover Section
Hi, and welcome back to ten CSS3 branding and presentation projects. In this project you're going to be creating a cover section for a site that has parallax scrolling layers on it. If you've never worked with parallax before, it describes the way that when you look into 3D space, objects that are further away from you will seem to move slower than those that are closer to you. So, for example, if you're sitting in a car and you watch trees that are off in the distance, they'll seem to move a lot more slowly than the road that's rushing underneath the wheels of your car. Now we're gonna simulate that effect by giving the impression that there are layers on the cover section of this website that are closer to you. And they're gonna move faster when you scroll horizontally, than the layers that are gonna appear to be behind them, and they will move slower when you scroll horizontally. So to start this project, look at the related links section below this video and find the link to the base pen, then you can fork that base pen into your own CodePen account. So, as I mentioned, parallax scrolling is to give you the impression that you're looking into 3D space. So, to create our three dimensional effect, we're gonna use CSS3's 3D properties that now exist. To allow us to do that, the first thing we have to set up is a div that is configured to work with three dimensions of space, not just the two dimensions of space that CSS operates within by default. So we're gonna add a new div into our HTML, and we're gonna give it the class parallax, because all of our parallax scrolling is gonna happen inside this div. And then we're gonna add this CSS. Now the property that we have included in our parallax class that gives us that three dimensional space to work within is perspective. Now if you imagine that the screen that you're looking at is like the lens of a camera, the perspective property determines the perspective that that camera has, as it's looking into 3D space. It determines how far away our imaginary camera is from the items that it's looking at. Now for what we're doing, we actually wanna have our camera up really close to the items that we're gonna be adding in, so we just have that perspective value set to one pixel. And then for the height of our parallax layer, we're using viewport relative units. vh refers to the height of the viewport, so by setting our height to 100vh, we're making sure that our parallax box takes up the exact height of the viewport space, no more, and no less. Now a little bit later, we're gonna be scaling up some of our layers, some of our parallax layers and they're going to become wider than the screen that we're working in. And we don't want our horizontal scroll bar in there, so we're making sure we avoid that by setting overflow-x to hidden. And then we're also gonna be doing some funky stuff with fixed position and absolute position divs, so we need to explicitly set overflow-y to scroll. Without this property in here, otherwise, when you add in all your parallax layers, you won't actually be able to scroll from top to bottom in your project. Now we're ready to start adding in our parallax layers. The first layer that we're going to add in is going to be the frontmost layer, so this will be the one that appears to move the fastest. And it's also going to be the one that holds the written content of the page. To your HTML, add this code. Let's take a quick look at what we've added in. Now we have a whole layer wrapped in a div. We hid the class layer and another class waveone. Now each of our parallax layers is gonna have the class layer. And then it's also going to have a class unique to that layer that will correlate with the image that we're gonna put inside the layer. This layer is going to have an ocean wave on it, and it's gonna be the first of three ocean waves. And then nested inside this div we have these two divs that are housing our text content, and we're gonna use these divs to give a white background around our text content. And we're gonna have that pushed down below the cover section. Now we'll add in the styling that's gonna apply to all of our layers with our layer class. Now, we've set position to fixed, because with some of our layers in a little bit, we're gonna be scaling them up quite large. And without having position fixed by default, they would lead to the height of our page being enormous, far, far bigger than our actual content needs it to be. So by setting position fixed on all of our layers by default, we make sure that the height of those divs doesn't get factored into how high the scroll bar thinks it needs to be. We're also setting our top, right, bottom and left positions to zero so that whatever we have in these layers spreads to cover the whole screen. We're setting the background position to be aligned to the top and the center. We don't want it to repeat in most cases, and also in most cases we want the background size to be 100%. So that means that no matter what the default size of the background image is, it's gonna be scaled so that it perfectly fits the div it's inside of. Then with setting the height of each layer div to 100% to make sure it fills up the whole height of our window. And we're setting margin to auto, so that by default our layer divs are always centered. Now we'll add in the styling for our waveone class and for the content divs that we have inside it. So to our waveone class we're adding an SVG background, this is the wave that I described earlier. And there it is appearing on the screen here. And we've set the margin top value for this div to be 85vh. So, one vh is one-hundredth of the height of the viewport. So, 85 is 85% of the height of the viewport. And that's what is allowing us to push this wave background down to the bottom of the screen effectively. And we've also set our background size to 101%, just to make sure that our wave here doesn't have any gaps at the left and right edges. And we've set position to absolute, and I'll show you why that is in just a moment. Then we've also set some styling on our content blocks, just to add a big thick blue border at the top, to set the width to 100% of the white area. And then we've also set our actual content text area to be 50 rems wide, so that we don't have a full width on our text content. Now, right now, because we have position absolute set here, we are able to scroll down and see our text section. So, this big white area is our content-outer div, and this inner area with the text is the content class. Now, if I were to remove this position absolute and then try to scroll, I'm actually scrolling right now, and I can't do anything. And that's because of that position fixed that we added on our layer class earlier on. Now this is the div that we want to have determine the height of our scroll bar because this is where our content is. That's what we want people to actually be able to scroll for. So by setting that to position absolute, the height of our content is what determines the height of the scroll bar. And now we can scroll up and down to the perfect amount that's required to see our content properly. Now we're gonna add in our second wave. And with this layer, this is where you're gonna start to see the parallax motion start to take effect. So add in this div. Again we're using the class layer and this time we're adding the class wave two. So now we're adding the CSS for that layer. There's our second wave, and now when we scroll, our first wave is moving faster than our second wave. So the further the layer is away, the slower it moves relative to those in front of it. Now the question is, how and why does this technique work? Well it all comes down to our 3D transform on this line here. There are three axises in 3D space. You have the x-axis which is the horizontal, from left to right. You have the y-axis which is the vertical, up and down. And then you have the z-axis, which is depth, from front to back. Now we're using translateZ. And then we're setting a value of -1 pixels. And what this does is move our layer backwards, away from the screen, away from the camera by an amount of one pixel. And when you move a layer further away in CSS, it tries to simulate how that layer would move in real three dimensional space. And that's why we're able to trigger that parallax scrolling system of something that's further away, moving slower. And there's another part to the trick, and that is the scale property. Now, I'm just going to comment out this margin top value, so that our background image comes up to the middle of the screen and you can see why we need this scale effect a bit more clearly. Right, now that that layer is sitting up in its unmoved position, let's see what happens when we remove this scaling and we set it back to one. And you can see that is much too small, what we actually want is for this layer to appear to be about the same size as this layer, and that's why we're scaling things up. Now the general rule with this technique is whichever number you've put here as you translate Z negative access amount, you add one to it. So if translated backwards by one with this layer, we need to add one to that giving us two, and that means we need to scale this layer up by a value of two. All right, now we'll reintroduce our top margin, and then we'll carry on adding the next layers. There are three more parallax layers that we're gonna add, so first we'll add in the HTML for all three, then we'll add the styling in for our wavethree class. There's a third wave that's appeared now. And this time instead of translating on the Z axis by negative one pixels, we're translating by negative two pixels. So that's putting that third wave on the layer behind our second wave. And using that same approach of taking this number and adding one to it, we're scaling up by a value of three. We're using the same width setting that we did on our second wave. But this time because our layer is larger, we need a larger top margin value in order to position this here where we want it, and we watch this scrolling effect. You can see that that rearmost layer is scrolling the slowest. The next layer uses the acme class cuz that's where we're going to put our acme logo. We have moved the layer that we are placing this on back by three pixels now. So we've gone negative one, negative two, negative three, and then we've added one to this value to scale up by a factor of four. Now, this time we don't want a full width background, because we want a little bit of space on the left and right sides of this logo, so we've just set that width to 75vw. vw is another one of our viewport relative units, and 75vw represents 75% of the width of the viewport. And then we've just set our margin top value to give us enough space here. Now, we'll watch this scroll. And now the acme layer is the one that is moving slowest out of all of our layers. And finally we'll add the styling in for our cloud's class layer. Now you'll notice that we've jumped from a negative value of three pixels here up to negative seven pixels on our cloud layer. The reason is that we want our cloud layer to move considerably slower than the other layers to make it appear like it's much, much further away. Now, the further back you put your layers, so the higher a value you give this number, the slower the layer will scroll. So you can set that value to anything that you like, as long as you then add one to it and set that as your scaling value. Now for these clouds, we actually have three clouds, but we want them to be able to repeat infinitely from left to right no matter what size the screen is. So if we drag this open, you can just see the start of the fourth cloud here. We have all our scrolling layers in place now. Let's have a look at our completed parallax effect. So we've got our clouds moving, the slowest of all in the background. And you can just see how the acme logo just creeps over them. And then our front layers, our waves, gradually fold up and close over the whole scene. There is a ton of potential for all sorts of different designs that you can come up with using the parallax scrolling effect. Now, I deliberately kept the SVG that was used in this project relatively simple just to keep the focus on how the code works, and we would love to see what you could come up using your own art and putting together your own take on this parallax scrolling technique. So when you finish this project or any others that you build off this, please tweet what you create through to us so we can see it too. You can tweet it to us at #10CSS3projects. In the next project, we're gonna be doing something a little bit unusual. We're gonna be using CSS3 gradients combined with animation and a few other interesting CSS3 properties to create a spotlight sweeping from left to right on a stage. I'll see you in the next project.