 Hello, my friend and friends. Someone recently shared this site with me and asked how we could do this like kind of cool parallax effect that's going on. We have the different depth of everything and there's definitely ways of doing this with JavaScript libraries and other stuff, but it got me wondering is there a way that we can do this with CSS only because I've done parallax effects with CSS before. We just use background attachment fixed and people always tell me this isn't really a true parallax because you can't really have depth to it. There's also a video out there by WebDeb Simplify that takes a look at how we can do it using this cool trick with perspective. That's really interesting, but there's some limitations in that. So if you're looking at this like the things further back are actually moving faster than the things moving that are closer to us, which can just be done for artistic purposes or whatever, but you still get a fun effect. But definitely I'll link to WebDeb Simplify's version down below as well. The other thing is you need to have like the element have the scroll and not the body and modern CSS is opening up a world where we can do this with a really cool way using scroll based animations. So what I did is I actually stole the images from that site and luckily they actually set them up really well for us, but this is a demo site that I put together with no current parallax and we're going to add it in there and we're going to see it's really easy to do. First, if we just take a look at my HTML though, it's nothing too complicated. So I just have everything inside of a div called parallax. Then in there I have my header. So that's going to be my navigation, my links and the stuff that's over there. I have my hero area that just has my text in it. So all the text basically and this button down there are all inside of this hero that we have. And then all I've done is each one of the images is its own image and I've given each one a class. So I have my background. There was a dust layer, a foreground back and a foreground front, which are this part at the bottom, where everything eventually is going to hide behind. So this blue effect on there. So that's the foreground, front and back. Then I just have each of the characters, Jack's, Luna, Manny, and then there's these rays too, which is like the lightning rays that are shooting off of everything. And so the main thing is just inside a class of parallax, just put all the different pieces that you need to be moving in different directions. So this could be two things, it could be 10 things, it could be 100 things. If you really wanted it to be as long as each one is its own thing in there, it should work. And even technically you wouldn't, you could set it up a bit more complex than that. We could do this with nested things that are inside of here. We're not really actually limited to setting it up this way. I just feel it makes it easier to be able to like have all the layers working together because we do have to play with that index as well. And the reason that we need to play with that index is obviously they're all overlapping and you could use display absolute to do that. But in this case, I find the easiest solution to getting things to stack on top of each other is to do this. So on my parallax, I've set a min height on there just so it takes up the space I need it to. And then I've used a display grid with a grid template areas of stack. Just to show you, if I take that off, it just means that everything now like we have my navigation at the top, then we get this next piece, we get my background, we get the dust, we get the two different weird background things, we get the character there, the other character, you can see all the different individual pieces. And then I'm just saying, and this is one of the reasons I said have everything as a direct child to the parallax class or whatever you're calling it, because then by saying that we have a grid template areas of stack, and all the direct children are living in that grid template area, they all just stack one on top of each other. I was also really lucky with this project because I literally just stole their images to be able to do this in that everything lined up where I wanted it to be. It is possible at this point, you do need to move them around. But luckily, if you're using grid, you can throw a position absolute on things now. So let's just go and find that character really fast, which I think is jacks. And if I do a position absolute, and then I can just say like top 100 pixels, it's going to move down by 100 pixels, or I could do, you know, negative 2000, probably can't see it, 200, you get the idea. Just because position absolute works really nicely with grid, so it's always going to be within that grid cell that you're in. Though we might if you're doing that a position of relative on here will help out just to make sure it is living within that grid cell. But put the position relative and then you if you do need to move things around within the grid, there shouldn't be any harm in using your positioning absolute to get them where you need them to go. I just got lucky with this and the images that happen to be all lined up where I want them to be to start with. So if you do need to make any tweaks or make any changes to get things where you want them to be set that set all of that up just so it's static and it's working like this. And then once that's done, you're going to see how amazing this is with the some of these new CSS features that we have. So the very first thing I'm going to do is let's just come all the way down. I'm going to go here. Just because this is all the style stuff I have related to what we're going to be doing. And I'm going to create an act keyframes because we need an animation for this to work. And I'm going to call it parallax parallax that. And now we can just set a two. So it doesn't matter what the beginning is because the beginning should be the default where everything is where it started at. And then here I'm going to say transform. I'm going to do a trans translate why because when we do the parallax we want things moving up and down. If we want to move down when we do a translate, we just need a positive value. So for now I'm going to put 200 pixels and we're going to modify this a little bit soon. But this is going to set the stage for us to work. And you might be wondering, Kevin, how is this going to help us with parallaxing? And this is where, you know, as I said, we're going to use some new modern CSS for this to work. And I won't like browser support is not perfect. But we'll talk a little bit about that after. So let's come all the way up. And so we're going to come here where I'm selecting all of the children because I want them all to be using that animation that we just created. So let's come here, we're going to say that the animation, it's our parallax, right? Power relax, I always spell parallax with two R's and one L. So it's really hard for me to get this right every time. And I want it to be linear. Just because you could, I guess, give this an easing function so it would speed up or speed down as you're scrolling. And I guess you could even individualize this for each one of those pieces and give them different timing functions. I haven't played with that. That could be something fun to do. But this obviously, you know, if I save, nothing's going to work right now because we don't have a time on this. You know, how does the browser know how long this should take? And, you know, if I did come in here and I put a time, things are going to get kind of funky, right? So we do that and then the animation should be on those and everything moves down and then it stops. And that's kind of weird and clunky. And we definitely don't want that to happen. But there's a new thing we can do in CSS, which is animation timeline. And there's a lot we can actually do. There's a whole bunch more to this. But I'm only looking at it for this parallax effect. If you'd like to know more about how this works and deep dive this a lot more, we can. But for this, we just have to write scroll. And there's different things we can pass into here. But for this, we don't have to because I'm going to hit save. And just like that, it's working. And it might not look like it's working because we don't have a lot of movement coming in. So here, just to show you that it actually is working, let's make this a really big number. Let's go with like 5,000. So now we're at the top of my page. But as I scroll down, see how it's scrolling with me and the text is going up behind it? Oh, my goodness, that's cool. So we're now translating all of those pieces that are inside there by 5,000 pixels as we're scrolling. And the final thing will happen at the bottom of our scroll, if I understand this correctly. And again, there's ways you could actually modify. Where is it watching for this scroll? So a longer page is obviously going to be different from a shorter page. But you could say only do it while only be tracking the scroll while the elements are in the viewport. And there's other things. But for this demo, I'm not going to worry about it too much. And let's just bring this back to 200. And this is sort of going to be like this default value I use, maybe 100, whatever, I'm just going to use that for now. We're going to sort of modify this on a per unit basis. But yeah, we'll get there in a second, because it's sort of what we need to do now. Because it's working, but it's not working enough. All right, we need to individualize it. So this is this is sort of my animation base speed, I guess. And what I'm going to do is actually put a calc in here. So my transform is going to be a calc. And what we can say here is var animation, or we'll do parallax speed, I guess, I was gonna say animation speed, but parallax speed times 200. And so we're just sort of, you know, the 200 again, right now is sort of a random number that I'm throwing in there. So maybe there's a better value that could come here, maybe 100 is a good base value. But it's sort of just getting everything, okay, they're all going to be doing this. And then from there, each element, we can individualize how fast it's actually scrolling by changing what the parallax speed of it is. And so let's come and, you know, I guess we can copy this. And I'm going to shrink this down back so we can see everything we're working on. And let's just come and grab the text for now. So my text here, we have my header and my hero. So it's my navigation plus this text here. And I can come in with a para lax speed. By the end of this video, I'll hopefully be able to spell it first try. And let's just come in with 100. So it's a really big number. And so now if I do look at that, it's moving off super fast. And right away, we can see there's a problem with this. Is that we're getting it to sort of it's coming over here on top of other stuff, which 100% it's that is an issue. But I do have a solution for that. So don't worry, but we'll address that in a little bit. And of course, here, that's really fast. So maybe if I do a 10, it's going to slow it down. You can see it's already we're getting a para lax effect, because the text is moving in a different speed than the stuff that's behind it. And if you wanted to, you could also put a negative here and give it a negative speed, which means it's going to move up faster than everything else. So now we're moving off and just to highlight that more negative 100. And the speed is going to zoom off, even though the rest of it is still there. And so now all this all we have to do is decide on sort of how we want things to move. So maybe we can grab this and my background, I'm going to give this a parallax speed of negative 10. Because I actually, you know, just for fun. And this is where this opens up more possibilities than using that trick that I'd mentioned Kyle had, which the advantage with Kyle's is browser support. For sure. And again, what we will mention browser support. But the nice thing with this one is we can, doesn't matter what the depth of things actually are, we can just say that, oh, I want this thing to move this fast, this other thing to move this fast, this one's going to move backwards, this one's going to move forwards. So my background can move upwards faster than everything else. Then I can come on my dust, and maybe my dust can get a, I don't know, a negative 20, it's going to move up faster for actually, I think this one will actually the dust. Yeah, that's that texture. I think that would be fine. Luna's my the one all the way in the back here. So let's come in. Just for fun, we'll do that at a 20. Let's come on Manny here. Who's the one behind the text? Manny can get a 30. And then Jax can get a 40. And just because these rays are sort of focused on Luna here. Yeah, Luna, I'm going to give the rays the same one that we have on Luna. And then we have the foreground and the background, we'll leave those for a second, though we can definitely come in with those as well. And now we can see that everything is moving at different speeds, right? You can see all the different pieces and they're moving at different rates. And so I have like right now, the character closest to us is like way up above this back one. And as we scroll down, they sort of start lining up more. And then I was looking as I was playing with this, I was looking at theirs, and they actually sort of did the opposite where they had the other part going on. So I was like, Oh, I guess that means Luna can get like a 50, as well as my rays. And then maybe that's a 30. And then Jax here can get like a 10. And this is what I really enjoyed with this solution was being able to like play around with the different speeds and move different things at different rates. And just to highlight this even more about how this is working for now, let's just come up and make this 200 VH. It sort of breaks the layout a little bit because the rays don't take up enough room, but you can sort of see like the different speed that everything's moving at now, which is kind of fun. So we can get all those different pieces going, right? So I think it's really cool. I think this opens up a lot of possibilities and a lot of fun stuff that we can definitely do. But as we run into this one problem here, just because we're using Z indexes of everything because I needed to layer where everything is, it created a little bit of an issue where things could escape. And so the only good solution that I came up with for this, and I think it's perfectly fine is just on my parallax here, I wanted to give it a position relative since we're using Z index, and potentially position absolute to move stuff around. And then also just give it a Z index because this is going to create a new stacking context when I do the Z index here. And what the stacking context means is now everything you can see it's it's hiding it's working right because my Z index on here is saying though all those Z indexes that I placed on those other elements, they're stuck now within the parallax, they're not looking at the rest of the document and the rest of the flow. So I'm not pulling them in front or behind of other elements on the page. They're only stacking relative to one another within this parallax area. The other thing is you potentially will need the rest of the area. So I had this main content where I am giving it a background. So if I didn't give that a background, and I just went with the default, obviously you see it coming in. And that's just because the background is transparent, right? So you do need the next section that comes after all of this because they are sliding down the entire page is I'd want to come in with the background on there. The reason you might be going, well, Kevin, just do an overflow of hidden, right? So let's come and do that overflow of hidden. And if I do that, everything breaks and it doesn't scroll anymore. And the reason for that is because now this scroll is looking at scrolling within that element. And it's not looking for scrolling within the entire page. Because as soon as we do this overflow hidden, we're sort of introducing overflow deals with scroll bars and other things like that. So we're introducing a new scrolling context, even though there's no actual scrolling coming in here, whenever we do this animation timeline, it's looking at the closest thing that could potentially be scrolling. Normally, that's only the viewport. But as soon as an overflow comes anywhere, that entire element will then be like, okay, this could potentially be scrolling, I'm going to be looking at that. I'm not using the right terminology to explain how this is working, but it is sort of the basis of what's going on there. So we can't use the overflow of hidden, which is definitely a bit of a downside 100%. I wish there was a little bit of a way around that. But I don't find it that bad just having to come in and say that the rest of my page has a background color on it. For me, that's not that big of a deal. And it just means you have your parallax area, and then you just have whatever comes after it. This has to have a background color on it. That's the crux of sort of the limitation on that. And of course, then you're going, Kevin, what about browsers that don't support this? And Firefox is one, and Safari is the other, because if we go and let's go to Can I Use, and look it up, animation timeline, if you don't know about Can I Use, definitely a great place to look. But you can see it's being worked on. So it's behind flags in Firefox, and it's not currently in Safari. Because it is in Chrome, it does mean it's supported by almost 63% of browsers out there, which is kind of cool. So it's already pretty high. But it is still experimental. Things could change. And this has actually changed a lot for the better since I first played with it. But I haven't made any changes. Here we are in Firefox, and it just means they don't get the parallax effect. So to me, this is a really nice progressive enhancement. It looks cool if it works. But it's not like this, you know, it's not something that's going to be like this deal breaker that's getting people to buy or not buy your product or whatever. Maybe that's a little bit harder to sell on your boss. But even if you're using something like background attachment fixed to do something very simple, that's not working in iOS anyway, right? So there's limitations to a lot of different things like this when it comes to these types of effects. And I'd much rather do this to potentially have to use some JavaScript library instead. It's nice all the stylings with CSS. It's crazy easy to set up and then just modify speeds with something like that. I find this amazing. And as more browsers gain support for it, more users will see this new end result. And if you're saying that your boss wouldn't let you do it or whatever, there is a polyfill as well. So I'll link to this in the description. You know, it works either because this whole scroll timeline thing is something that's available to do through JavaScript as well. But you can see here that we can set it up and use it with the CSS animations. And the polyfill will just bring it in and make everything work for us. If the browser doesn't support the native feature like we've been looking at so far. And if you enjoyed this video, and you'd like to see another awesome CSS feature that's relatively new, we have the has selector, which actually has much better support than this one does. And it can do some absolutely incredible things that were never possible before in CSS. So if you'd like to learn more about that, I have a video that takes a look at it right here and some of the really cool things that we can do with it. And with that, I would like to thank my enablers of awesome Johnny, Tim, Simon, Michael, Andrew and web on demand as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.