Parallax Scrolling Effect Tutorial: How to Build a Parallax Feature From Scratch

In this tutorial we’re going to walk through how we can build a parallax image feature into a website completely from scratch. And if you do not know what a parallax feature is it is this image right here. And whenever the user scrolls do you see how it looks like the image actually stays in the background and looks like the rest of the site is just scrolling on top of it. That is what a parallax feature is. And so that’s what we’re going to build.

Right here we have a starter where we have the nav bar and then nothing underneath it. So I’m going to close this and we’re going to add the image right here. Now you can use any image that you personally want to have. Or you can get it from the show notes. So I’m going to go to a link and I’ll include this link in the show notes as well so you don’t even have to go to it manually but I have here inside of a background’s directory a file called friesherobg. And so you will go to this link and you can just right click, click on Save image as and then save it into your project. So I’m going to add it to images. I’m not going to put it right here, I’m going to create a new directory and let’s call this Backgrounds just so we’re organizing all of our code properly.

So we have Fries Hero Background which is a jpeg and so this is what we’re going to use for our demo. Once again you can use any image you want. I will say you probably want to have something that is around this size just because this is going to be similar to the actual size on the screen. So now that we have that image let’s add our html structure. So I’m gonna switch over into the code here and below where that nav bar is and you can see where the closing tags are. You can see that this is where the navigation wrapper ends. And so here I’m going to create a new dev. So I’m just going to call this the hero section. So I’ll say hero section and inside of here I’m going to have a top heading and then a bottom heading and I’m just going to call them exactly that. So it’s going to have a class of top heading and this is going to use a H1 tag. So we’re going to use H1 heading or I’ll say HTML styled fries, doesn’t have to make sense because it’s not a real restaurant.

So now we have HTML styled fries on the top and then for the bottom right here I’m going to use a different type of heading. I’m going to use a H3 heading and here we’ll say coding fuel and believe it or not that is all of the HTML code that we are going to have to write. Everything else is going to be set using CSS. So if you hit refresh you can see that we have the content there and now we’re going to switch over to CSS and we’re going to be able to add that parallax feature. So I’m going to create a dedicated file here for home page styles. So I’m going to in the styles directory create one called Homepage.CSS and then I will make sure to import it here at the very top of the file. So I’m going to pull in styles, Homepage CSS and now all of the styles that will be adding will be included in this specific file.

So going to the home page here and let’s also get a little bit of room, so I’m going to add a comment here and say this is the styles for the heroes section. And then let’s just grab that class so the class is named Hero section and the first thing we want to do is to grab that image. So I’m gonna say background-image and then I’m going to pass in a URL. So the URL doesn’t have to be a URL such as grabbing an image from an outside source even though you can do that. The URL can also be the path to an image. So if you’re familiar with how path’s work then what we can do is we need to jump back a few directories. So here you can see that right now we’re in this home page. We need to get outside of the styles directory and jump into the images directory. And the way we can do that, the way we can jump back, is by saying dot dot slash and then if you’re using VS code, VS code kind of cheats for you a little bit. I remember back when I first started coding it was not anywhere near this easy but as you can see it pulls up some set of valid options. So here we can just click on images then we want backgrounds then we want friesherobg.

Now if you are not using a tool that gives you that kind of intelligent auto complete then just know these two dots will jump you backwards so you’ll no longer be in the styles directory, you’ll now be at the root of the project. Then you’re going to go to the images directory, then backgrounds and then you’re going to grab the actual image that you’re looking for. So now that we have that, now we want to add some padding because if you look here you can see that these two headings here are flush up against the left and the top so I want to add a little bit of padding here. So let’s say padding of 100 pixels all the way around and then if I hit save here this is not going to work yet. So if I hit save you can see we don’t really have what we’re looking for, it just gets the top of those fries and that’s not exactly ideal.

So what I want to do is I want to hard code a heighth. And also one other item of note, the only reason why we even have this heighth rate here is because of the padding and these headings so it’s simply going off of the content. That’s not what we want. We actually want to dictate the height. So I’m going to add a heighth value here and I want it to be 300 pixels. And what this means is that the hero section now is no longer going to care about the content. It’s always gonna be 300 pixels high and as you can see it gives us a little bit more height.

So now that we have that let’s actually build the parallax feature. We have the background image but now we need to apply some different behavior than the default behavior. So I’m going to say background-attachment and we want it to be fixed so that’s how the image will not float the way that a normal scroll would have it float and then from there I want the background position to be centered. And then from there we do not want the image to repeat so I’ll say background repeat will be no-repeat. And then lastly I want the background size to be cover and we’ll walk through what each one of these represents as well. So now if I hit refresh you can see that our image is centered.

Now it’s kind of hard to tell that the parallax feature is working because we don’t actually have any scrolling. So let me pop this open here really quick in a new browser window where we have a little bit more control over the size. So let’s shrink this down just a little bit. There you go. OK. So now watch what happens. Do you see how the image there is now holding in place even when we’re scrolling. So that is the full parallax feature. This is all working really nicely and that’s all of the code that you needed to implement to build a parallax.

Now let’s switch back and walk through exactly what this is doing. We’ve talked about background image. I think that’s kind of self-explanatory, that’s just grabbing a path to the URL. Then we added some padding for the content and then we declared a hard coded value for the height. Now the background attachment. What this is saying is that we want the image to be fixed. We do not want it to slide up and down the way an image normally would. Now the background position, this takes the image and it just centers it. So we could position it however we want. I want the majority of the middle of the image to be shown. So I had it centered and then by default images actually repeat. So a background image if you just want it to be shown one time you have no repeat just to make sure that say someone’s on a giant screen and so this doesn’t happen unless you have someone who has one of these wide screen monitors. They would actually see multiple versions of the image if you did not put no-repeat on there.

And then lastly this is a really cool little feature called background size cover. What this does is this will take the image and it shrinks it down and also crops it so that it’s able to be shown like we see right here. So that is something that is really cool. I use the background cover quite a bit because what it does is it maintains the aspect ratio but it crops the image. So it is centered and so it’s just grabbing the very middle of the content and it’s doing kind of like a digital crop of that image. Now if you’re working with an image and it performs the wrong type of crop then you may need to edit the image itself or something like that. But for most cases I’ve found that that works quite nicely. So in review you now know how to implement a full parallax feature in HTML and CSS.