True parallax with CSS-only is now possible

hello my friend and Friends someone recently shared this site with me and asked how we could do this like kind of cool paralex effecta 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 parallx effects with CSS before we just use background attachment fixed and people always tell me this isn't really a true parallx because you can't really have depth to it uh there's also a video out there by web Deb simplified that takes a look at how we can do it using this cool trick with perspective uh 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 um but definitely I'll link to web Deb simplifies version down below as well uh 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 um scroll based animations um 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 uh 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 my header so that's going to be you know 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 all the text basically and this button down there are all inside of this hero that we have um 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 um where you know everything eventually is going to hide behind so this you know with this blue effect on there uh so that's the foreground front and back uh then I just have each of the characters Jack's Luna Manny and then there's these Rays too which is like the you know 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 could be 100 things if you really wanted it to be uh 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 cuz we do have to play with Z index as well and the reason that we need to play with Z index is obviously they're all overlapping and you could use display absolute to do that uh 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 um 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 I 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 cuz I literally just stole their images to be able to do this uh and 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 uh 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 Jack 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 2 2,000 probably see it well 200 you get the idea um just CU position absolute works really nicely with grid so it's always going to be within that grid cell um that you're in uh 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 uh 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 um just CU 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 key frames because we need an animation for this to work and I'm going to call it par Parx like that uh and now we can just set a two so it doesn't matter what the beginning is cuz 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 y 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 uh soon but this is going to set the stage for us to work and you may be wondering wait Kevin how 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 lie browser supports not perfect but we'll we'll talk a little bit about that after um 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 par Parallax I always spell Parallax with two RS and one L so it's really hard for me to get this right every time and I want it to be linear um just because you know I 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 uh 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 uh the animation should be on there 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 parallx 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 and it might not look like it's working cuz 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 uh let's go with like 5,000 um 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 uh 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 uh and again there's ways you could actually modify where is it watching for the 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 uh 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 um 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 um yeah we'll get there in a second CU it's sort of what we need to 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 do parallx speed I guess I was going to 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 I'm throwing in there um so maybe there's a better value that could come here maybe 100 is a good base value but it 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 um and so let's come and you know I guess we can copy this uh 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 my navigation plus this text here and I can come in with a par Parx speed by the end of this video I'll hopefully be able to spell it first try um 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 um is that we're 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 uh but I do have a solution for that so don't worry but we'll address that in a little bit uh 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 parallex effect because the text is moving at 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 we're moving off and just to highlight that more 00 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 -10 cuz I actually you know just for fun and this is where this opens up more possibilities than using that trick that i' mention Kyle had which the advantage with Kyle's is browser support um for sure and again 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 move this fast this other thing to move this fast this one's going to move backwards this one's going to move forwards um 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 -2 it's going to move up faster for or actually I think this one will actually the dust yeah that's that texture I think that would be fine uh 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 H and just because these rays are sort of focused on Luna here uh 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 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 Jack here can get like a 10 and this is what I really enjoyed with this uh 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 uh for now let's just come up and make this 200 VH um it sort of breaks the layout a little bit cuz 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 uh I think this opens up a lot of possibilities and a lot of fun stuff that we can definitely do but as I we run into this one problem here just because we're using Z indexes of everything CU I needed to layer where everything is uh it 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 um 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 Zed index on here is saying though all those Zed indexes that I placed on those other elements they're stuck now within the parallx 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 parallx 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 cuz the background's 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 uh 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 uh 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 the basis of of what's going on there so we can't use the Overflow of hidden which is definitely a bit of a downside 100% um I wish there was a little bit of a way around that but I don't find it that bad just having um to come in and say that the rest of my page has a background color on it um I don't you know for me that's not that big of a deal and it just means you have your parallel X area and then you just have whatever comes after it you know this has to have a background color on it that's the the Crux of sort of the limitation on that uh and of course then you're going well 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 uh animation animation timeline if you don't know about uh can I use definitely a great place to look but you can see it's being worked on so it's behind flags and 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 uh so it's already pretty high but it is still experimental things could change and this has actually changed a lot for the better um since I first played with it but I haven't made any changes here we are in firo Fox and it just means they don't get the parallx effect so to me this is a really nice Progressive enhancement it looks cool if it works but it's not like this 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 uh 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 um it's nice all the stylings with CSS it's crazy easy to set up and then just modify speeds with something like that it's I I've 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 um there is a poly fill as well so I'll link to this in the description uh you know it works either because this whole scroll timeline thing is something that's uh 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 uh if the browser doesn't support the the native feature like we've been looking at so far now 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 uh 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

Channel: Kevin Powell

Views: 199,763

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css-only, parallax, parallax effect, css parallax, scroll-timeline, scroll(), css scroll timeline, css scroll effect, css scroll animation, scroll animation, tutorial, parallax effect css, parallax scrolling tutorial, pure css parallax, parallax website, parallax scroll animation, parallax animation, css parallax scrolling effect, parallax effect using css

Id: Qj0Qx8HpNUo

Length: 17min 31sec (1051 seconds)

Published: Thu Nov 02 2023