edutechional's video: Parallax Website Tutorial: How to Build a Parallax Effect with HTML and CSS

In this dev tips tutorial we're going to walk through how we can build a parallax image feature into a website completely from scratch (and without JavaScript). 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. In this graphic design guide, 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. 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. Full guide and image/code source: https://www.edutechional.com/2018/08/16/parallax-scrolling-effect-tutorial-how-to-build-a-parallax-feature-from-scratch/ Follow me: Twitter: https://twitter.com/jordanhudgens Instagram: https://www.instagram.com/jordanhudgens/ GitHub: http://github.com/jordanhudgens