Create a layered parallax effect with HTML & CSS

Key Takeaways

I'm sure you've all seen the simple Parallax effect you can do like this where the text is moving but the background isn't oh it looks alright but it has been done before so why not step things up with just a little bit more CSS and create something where the background is moving but the text is fixed and then hides away in a really fun way if you want to learn how to do this then that's what we're going to be covering in this video [Music] hello my friend and friends thank you so much for coming back for yet another video and just in case you're new here my name is Kevin and here at my channel I help you fall madly deeply in love with CSS and one way I think we can do that is by making fun and cool things so let's dive right into it and take a look at the code that we're starting with which is very very simple and not very much where I have a header with a class on it and then my header inside of there my H1 right there now this does not need to be a header with whatever you just need to have like your parent and then the text inside of there but right now we don't have very much going on with that so in my Styles really quickly we can add in some styling just to make this a little bit bigger basically I'm using a clamp just to give it a really big font size that is responsive I have a text transform on there font weight 900 we just need some big text then on the parent of that we need to add the background image that we want to be using so background image however you want um position it if you feel like you need to position it and I added a Min height and some padding just to give it sort of the space that it needs to live the one thing that's kind of important for this if you're doing it is to make sure you have like a space underneath like whether this is buildings whether it's trees whatever it is you need to have like the room for the text Above It generally so the five Ram of padding but then that Min height just does build in a little bit of an extra space there if ever we're on a smaller screen the text is wrapping the space can grow to accommodate and that is the basis of what we need to get started with this ideally for your image you're going to have something that does have like a foreground and background and the cleaner the lines are in the foreground the easier this is going to be because we do need to create an SVG mask for this so I went and used figma to be able to do this and we're just going to fast forward myself creating this mask right here now before creating the mask itself in my preferences I am setting things up to be turning off the snapping Behavior because that just really makes it hard to do for this type of thing you probably want to turn it back on when you're done though if you do use figma regularly and then basically I trace the shape that I want to have I did make a mistake along the way because I should have traced the sky because the important thing here is we need a mask or we need to like draw a shape that is the area that will be visible where we will see the text and not where we won't be seeing the text the other thing that's really important is in figma you want to make sure that your entire canvas area for your SVG fills the original size of the image that you're going to be using and that's just to be able to get things to line up and everything so because I chose the wrong area it was a little bit more work but basically you want to have the top area being full and then the bottom area being completely transparent you can use like their Pathfinder tools to make these different layers which I did here I did some copying and pasting just to have one section that's my sky and one section that's my mountains that's basically what you need one top section one bottom section and then the bottom section you just make it fully transparent at least that's how I figured the best way to do it is take the two of them group them together and then you can export that as your SVG in this case my Mountain was also very bumpy and that made it a lot more work because I really had to zoom in and be very careful with my my path the straighter the lines the simpler it is the easier this is going to be and if you do need something that's actually like faded out like I don't know you're doing something fluffy or soft edged then you'll actually need to do this probably with a raster software like Photoshop or maybe but you could be used masking to do it and then you could export as a PNG instead with transparency but of course that makes for a much heavier file and then what do we do with it well it's not that bad we just come in and we need to wrap this in what is going to contain our mask so here I've given my sight header mask and then I have my site title inside of there and we just you just need to have that layering on there so the first thing we can do then is to apply this mask or actually before we add the mask in on the site title here let's just come and give this a position of fixed and if we do position fix you can see it does shift a little bit and it's going to scroll and move with the site and this is very important this is sort of the key to everything working here as we have my position fixed and then I'm just going to do a whip back to 100 which is going to let my text align Center work once again and there we go this is scrolling with my site and again that is sort of the key for what we want now let's come in here and we're going to add our site header uh mask and on the side header mask let's let's just start by doing we're going to give it a position of absolute and I want it to be positioned within my header here so on the header I'm also going to add a position of relative just so this becomes the containing block and then here I have my mask that's going to be in there now I'm going to give this an inset of 0 which is a top bottom left and right of zero it's a shorthand for that and then just for now I'm adding this background on here so we can see that it's overlaying exactly and here if I just change this to like A2 REM you can see it sort of shrinks it in so by doing a zero there it's filling up the entire space that my say header was which is filled up with that background image just a really quick aside here I did Cover masks in more detail in another video and when I was researching that I found this effect by the channel red stapler I don't know if he's still making content it's been a little while but I'll link to his original video down in the description below as well as his channel just because he did Inspire this video that we were watching right now and now to add the mask in it's nice and simple we can just write mask and put in the URL that we want and it's not really going to work right away if you're following along but don't worry there's a very easy solution and this is just like a background image so I'm going to go to my images and I had the mask that I saved so that was my mountainmask.svg and when I save nothing happens and that's because I am running Chrome here and the chromium browsers uh are awesome and we still need to prefix it and web kit when you're prefixing you might not see it too much these days always use the first one the prefix version at the top and then the regular one at the bottom now because my image is really big we might actually see that this is going to be you don't see a difference but look it's actually disappearing when we get to here now so that's you see the magic of what's this is sort of the idea of what we want to do but I need to make sure that my mask is lining up with my image and basically all we have to do is add this Mass position and this Mass size here which are the same as my background size and my background position that are here as long as those two values match these two values you're perfectly fine you could create a custom property there I guess too to set that up for each if you prefer and of course I'm using Chrome so I do need to get these so let's just copy this so you know for it to actually work we need to prefix it so we can come on both of those and just add the webkit prefix and there we go you can see the red has disappeared from there and now if I scroll down the magic happens and it hides behind my mountains uh so it looks pretty good my mask is a little bit rough around the edges in a few spots the one thing I will say is if you're when you're creating your mask if you're having trouble with it or if you're not sure stay a little bit like on the darker side instead of the lighter side if you have a color difference because it's going to make it less noticeable when it's like if you have a little bit of a bad section in your selection that you created and the nice thing here is obviously I have this red on here I could turn the red off completely uh the only issue is then like sometimes your text might be a little bit hard to read but we have this natural overlay that we could use here so I could just put this to zero to be black or if my text was black I can make this white and now if I save it darkens my image and if I want it darker just make the opacity higher and I can control sort of that type of thing and I can get this really fun cool effect going on right there now if you'd like to know more about image mask I did cover it in a bit more detail and look at more things that you could do with it that are not Parallax related in this video that is right here for your viewing pleasure and with that I would like to thank my enablers of awesome Jan Johnny Michael Mr Dave Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your on the internet just a little bit more awesome [Music]