Parallax in HTML, CSS and JavaScript Tutorial - Let's make it happen!

Key Takeaways

so you gave me a thousand likes and six hours so we're gonna make this parallax happen in HTML CSS and JavaScript mind-blown first a very very a very exciting news reversed something new I've integrated a 60-second fast tutorial at the beginning of this video for those of you who don't want to watch you know all the steps right after that 60 second tutorial begins the regular tutorial where you see all the steps before we begin though 'la note the sponsor of this video makes it easy to host your site your app or service on whatever technology stack you use with one-click apps like wordpress drupal getting up and running is easy with back-end access to your server customization options are all but limitless a fully configurable dns manager allows for you to easily switch or to name over to your new server and ssl certificates can be installed for free using open-source tools so sign up using the link below to get $20 in credit on your new leno de count so a few days ago I did a parallax tutorial in figma and you guys really wanted me to do the HTML and CSS I required you to give me a thousand likes within 72 hours you did it within 6 hours which is awesome so I'm here with that video to show you how to do that today now one thing you guys didn't realize is I've already covered parallax in HTML CSS and JavaScript about three or four different times on this channel in fact I'm gonna overlay those videos on the screen right here and I show you in those videos one of them shows you how to do parallax and just pure vanilla JavaScript and also how to do it with different libraries such as Lac CAS which is what we're gonna use I'm also Relic CAS and also G zap it with scrool magic so I've already covered this but you guys really wanted me to see you know do it in this context so I gotta deliver alright so if you haven't yet make sure to subscribe please leave a like no no no the first step is to get your HTML markup written which is what I'm doing here and there's a link to a code pen demo with all of that code we really don't care about the HTML markup though for this fast - because well you're just interested in parallax the next step is to write the CSS and the goal at this point is just to get the layout looking at exactly as you want to on the device and you're really not interested in anything to do with parallax at this point now for the parallax I'm using lack such a s is seen here which is a three kilobyte solution for integrating parallax and it's dead simple you can import it through a CDN and then you simply have to initialize it and that's it no more JavaScript code to use loksat jsut simply add a class of lacks to the element you want to animate and then either use an attribute based locks preset or attribute based lacks properties like translate X or Y opacity scale skew or rotate the values you give these attributes gives you a lot of control or the type of movement that's applied to the given parallax effect so I suggest just getting in there and experimenting with the values to see what they do exciting all right so here we are in Visual Studio code I have a blank folder almost full it's almost blank we have an images folder as you can see and it has a forest dot PNG a mountains dot PNG this could actually be a JPEG just of this but this is literally the same images that are exported during the prototyping portion of the video that I did two days ago or a few days ago so I'm just keeping a quick and easy you could probably do a lot more image optimization on this but nonetheless I will make this available on these files so check the description I so what we want to do is create not inside of the images folder but outside of it in index dot HTML exclamation point and this is an abbreviation if you don't know what the heck that is I just check my channel I did a brief crash course on em every VA shion's basically makes it easy quick and easy to type in HTML we want to link up our style sheet so its main dot CSS inside of a CSS folder it doesn't exist so let's create that and then also main dot sass we'll use sass for this so you're going to need the sass extension we're also going to use live reload so if I first click watch SAS you're gonna need that extension and then right click on index.html open with live server so those are the two extensions you're gonna need this is our very blank page that's showing us right now and for those extensions by the way it's just a live SAS compiler in the live server so you want to install both of those and just really load Visual Studio code ok so now we're gonna get started with our HTML it's very simple markup for this again just to go back here let me open up Adobe XD just so we can reference what we oh that's right I didn't use Adobe XD I used figma let me open up figma real quick and this is our prototype that we created and when you're doing HTML and CSS by the way it's not loaded yet there it goes you just have to think of everything in terms of blocks so we have a navigation up here that's a block we have the individual logo we have the menu then we have this h1 element for the title I decided to go against having this block line and just using this arrow instead but our other blocks are just this graphic down this mountain's graphic in this tree graphic and then outside of that we have this so that's what we're gonna design for and get our HTML for setup rather so let's see here we're gonna have a container and overall container to kind of house everything you know away from the browser or something like that and then knob inside of there we'll have a header inside of header we're gonna have our two elements remember the logo and the nav menu so the logo is gonna be going nowhere it's gonna be class equals logo and then just the name which happens to be nature competent as in company outside of that we'll have a nav semantic element here and then I'm not going to have an actual navigation this is just a placeholder if you want to learn how to do a responsive navigation you can completely find one of the many resources even my own on the for that so I'm just gonna have the image right here which is in our images folder and that's called what does that call it menu dot SVG H this the three you know the hamburger icon I don't let's call this all menu here all right after header we have our h1 right so our h1 it says preserve nature alright and we're gonna give it a class of actually we're not going to give it a class we're gonna give a class later when we deal with our eye our parallax stuff outside of that we have our line and the arrow so I decided to just to use a div for that element and that is going to be called line all right and that's all it is for now we will actually add on custom data attribute for the parallax stuff but that's all we need for the line and the arrow we'll use the CSS after selector to get that triangle going after that that's it so we have this inside the container we're gonna end the container class there and then we have the content that's going to show up when the person Scrolls down and so we're going to put it in its own container as well and I'm putting it in inside of its own container so that we can control the parallax effect of that element specifically that's why I am NOT putting it inside of here so we're also gonna give this another class called secondary that way we can kind of control specifically you'll see when we get when you get to that section and we're gonna put in h2 this is just the type that we had strategic in the design and then we put a sub class P dot sub text and alliances again this is just the copy that came up with we're gonna do a paragraph here with lorem 30 for 30 character 30 words of lorem ipsum text and we're just going to replicate that shift all in the down arrow key and that's it that's all we need for up no it's not I forgot we have our two images which are the mountain graphic and also the tree so this is images for slash mountains dot PNG really this should reduce a JPEG and then mountains for the alt here and in class mountains that's looking good let's replicate this trees and this will be trees no it's called forests actually there we go and then we're having two class trees and I also reference this actually no we're good I was going to give these IDs but we don't need them we're not even reference these in JavaScript so we're fine all right and so that's it and if we go back and we look at our very ugly site this is what it looks like so far so what I'm gonna do is just position this here on the side so we can get a good idea of what it looks like in a mobile viewport because that's what we're designing for all right so let's go ahead and get started we have our main dot sass file right here make sure that's being watched by the way with that that extension that we have and I'm importing at the top here the no bowl and now a no bi or noble I'm not sure how you pronounce it font of 400 and 700 wait right here again code pen will be available in the description if you want to copy and paste stuff we have our body tag here we're gonna set the margin to 0 height is gonna be hundred viewport height background is going to be 1 9 1 9 1 9 and font family is no bile alright that's it so far not too exciting is it we're also going to put all and as la Elana along with the before and after on everything we're going to set box-sizing to border box so we have to deal with any calculations when we mess with padding and all that good stuff now let's mess with our container here so padding is going to be 2m all around so it's going to move things around we're gonna do with 100% actually yeah that's dumb what am i doing we're gonna do height 100 viewport height all right so that's pushing things down can't see anything yet but don't worry actually we can get that fixed up quite quickly just by addressing our mountains and trees so mountains is a class in the trees our class are applied to the two images position:absolute because we want them to stack on top of each other and we also want to put z-index negative one I know we can still can't see them though but we want the text that's on top of it to be visible so we're doing negative one and with a hundred percent to make these images responsive now the reason we're not seeing our trees yet is because in and you know those two images is because we need to set the top value because we're using position:absolute so mountains we're gonna say top is zero so there we go we have our graphic starting to come along and then our trees we're gonna say top 18% so you're wondering how did I know 18% because I was literally just experimenting with this I wanted to get to the right you know I wanted to show a certain amount of mountains and versus a certain amount of the trees again if we change this to like 10% it brings it up even higher so I'm just choosing 18% now of course there's no parallax because we haven't done that part yet but let's go ahead and work up here I'm get this stuff looking correct and the content that's sitting on top of it so I in our container we're also going to have we want to reference specifically adjust the first container so we can say at we do and and then if I can get it there we go first child which means it'll select the first instance of the container and we're going to say display grid and we're going to say grid template rows is 10% so the grid template the first row is up here so I'm just saying 10% for the navbar and then 30% for this preserve nature section and then we can't see it yet but there's also an arrow the line arrow graphic which you know if you see if you look over here it's this thing right here this line arrow graphic that is gonna be Auto there we go so it kind of changes up things but it helped me basically get the arrows situated in such a way that we can have it position and constructed down here later on you'll see in a second now the h1 element itself we're gonna say text-align:center oh man didn't mean to do that there we go text-align:center margin:0 it's bold alright and then we're also going to let's see here font size make it a little bit bigger and then line height 0.9 um now by the way if you guys want to see what this looks like in an actual mobile browser control-shift I'd get a dev console and click on this alright so I think I'll just move everything right there okay so I next up after that we have our paragraph elements inside of our container line hi I'm just resetting this one point without by and come on Gary line height 21.5 a.m. this is for the paragraph of text that's below you can't really see this change it's just kind of increasing the line height and also the color is gonna be RGB 194 194 194 if your case you're wondering why I'm using that RGB it's just only because I hovered over it and changed it here then Visual Studio code automatically uses RGB values so that's that stuff right there alright outside of that we have our line so let's make that let's construct the actual line it's a line class and we want to use a line self end and that's in conjunction with the CSS grid because it's a child element of the CSS grid we have this element which is the first row and then second rows here and then the grids at the end we can't see this adjustment because we don't have the actual line and we're gonna apply that right now so for in order to get this line centered in the middle we're just gonna take this div element and give it a width of like 50% and then we're gonna say border right and we're gonna say one pixel solid and we're gonna say white all right and then we're gonna say height is 50% there it goes so we just gave it height and therefore we're able to see it margin bottom is 40 M I'm kind of pushing it away from the bottom a bit and then we're gonna say position relative because this is going to help us I position and the actual triangle so the way we create the triangle we're gonna put Bob and after so you can do before and after and this is just a way for you to work with CSS and adding extra shapes and changes without having multiple divs so you can just work off of the single same div to create something different in a sense so the way you do that always you just put empty content and then we put position:absolute width:0 height is gonna be set to zero and the way we create a triangle and if you just google create CSS triangle you'll find a lot of options some of our old where it says create for divs that's old you don't need to do that you only need one selector here really or one HTML element and we do it with border style we say solid border width we're gonna say the size this is based on the direction of the arrow and right now we want to point down so we put 0 on the bottom axis and the size of the arrow is 2 based on these pixel values so if you want it to be larger you can increase them so now we're gonna say right and I put negative 0.7 m again this was experimenting trying to get to the center and then bottom is negative 2 pixels okay let me see what I did wrong oh yeah we need to get a color in there so border color we say white and then transparent three times there we go so if you wondered like how did I know to get this really there's actually a CSS triangle generator you just google it you'll find it and it has a little nice interface for you to create it and then it just gives you the CSS output that's how I did that so there we go that's our arrow basically what we designed in figma all right so we're almost done with a lot of this stuff let's get this stuff up the header and all that stuff working so we'll come outside of here we're gonna reference our header element display flex and then justify content space hyphen between it'll push them away from each other and then we have our silly little logo and that is color black text-decoration:none oh come on Gary and then also font-weight:bold font size 1.1 am awesome and then we only have just a couple more things we have our h2 element it's all screwed up so let's get that working here we're gonna say h2 and paragraph did I say white no no no that there we go just two h2 element I we're gonna say color white there we go and then I we're going to dress the h2 as well we're going to say font size 3e M margin:0 and font-weight:normal there we go there we go and then also our subtext I think this is our last element by the way then we get to the fun stuff subtext margin-top zero font size needs to be bigger 1.4 a.m. and text transform uppercase alright and finally no I was wrong we need one more rule sets to call it secondary that's the class we attached to the container right here and we're gonna say margin top we're gonna push that thing up by negative 3 a.m. and that just helped with the alignment when I was dealing with figuring out the position of it with our parallax stuff so that is it now I did work in some media queries just to make it a little bit responsive so for instance when we push when we when the width of the viewport increases watch what happens it becomes a nightmare right like this looks bad so to fix that what you want to do is you figure out and this is pretty much standard for any responsive design you get your developer your dev tools up here whether that's in Firefox or Chrome and you pull this out and you figure out at what point of what pixel value right here is layout breaking layer or what point should we change something in the CSS so I would say right around this area because we can't really see the area way anymore we need to push the mountains up and we need to push the treeline up all right and so what I did is I will show you the first query that a media query that I put in was at minimum width 665 pixels so we just readjust the top value for the trees in the mountains class so now watch once we get to beyond 665 it's pushed up just like that and you can keep on just doing that sequentially so I had two more media queries for 9:30 and 1050 right here and you'll see what happens when we you know keep doing that personally I don't think this I this because we didn't design for a desktop when I was doing the previous video from a few days ago I we would need more content in here realistically to make this design work for desktop just because it looks a little bit ridiculous so that's why we're just focusing on mobile only and the same concepts or a parallax still apply regardless so that's what I wanted to show so we're gonna stick here in our mobile viewport so right now this is fine it works but if we wanted to give that cool parallax effect I we have several options so like I mentioned at the beginning of this video there's a lot of ways to approach parallax you can go to the pure vanilla JavaScript way if you want and you can also go through the third-party scripts and libraries route which is what we're gonna do with Lac CAS so as you can see we have this right here this is the github page for lack CAS and you could see there's a bunch of example shows you how to install it if you want we're gonna use the quick option right here a script source from a CDN and then it just tells you to initialize the plug-in that's all that's the only JavaScript that we're gonna need to use and this is a great script because it's a very lightweight it's only 3 KB minified and zipped alright so and it has a lot of options by the way tells you exactly how to use it for custom animations it shows you all the supported presets that has and also attribute keys which we will be using just a couple of those so a lot of things you can do with this recommend good stuff all right so let's go back to our index dot HTML we're done with the CSS we can close that out and we're going to first I'm going to import the CDN and we're gonna put that right here so that's where you specify that and then we're do some JavaScript down here and that's all we're gonna do is copy and paste that the way to initialize it from the documentation so this is all it is all right we don't have to do anything else that is it we only now deal with the HTML attribute values in terms of getting this working so if we were to save it again nothing's happening because we're not doing anything again nothing so let's first focus on this preserve nature text all right the way I designed it in the let's see our little demo here which is right here is it - it kind of goes up and it fades out all right so what we do is that is what is it it's h1 it's this h1 element right here so what we do is we apply to it a class of lakhs so everything has to have a class of lakhs that you want to apply any type of parallax effect - then we can use the custom data attribute what is it that we want to change we want to change the Y value the vertical value we wanted to go up so we could say data - lakhs - translate if--and Y where does that come from well it comes from right here it comes from the documentation where it presents to you all the custom attributes so data locks translate Y that's where that comes from all right we say Eagles and you put in with a lot of these you have basically two parameters that are comma separated I'm going to put 0 0 here and then we're gonna say 400 and then negative 400 here so as you can see it has changed the behavior of it it's actually moving faster than the rest of the page and that's what creates that interesting parallax effect this first value is based on how long it will last it's not like milliseconds it has there's different value based on the amount that has been scrolled and then this value right here the negative 400 is in which direction it's going to go so if I change this to 400 look how it stays so you can experiment with this greatly the greater this negative value like 900 it's gonna fly off the page practically we could probably really make it fly off if we change us to like 3000 oops so look at that I mean it just goes instantly so you have a lot of control over it we're just gonna leave it at 400 and if you also wanted it to fade out which I kind of did in the mock-up you can also add the data lacks a pasady attribute in control it that way we're gonna leave it like that for now though next up we're going to have our line so this line we're just gonna have fade out so we're gonna say once again class is lacs and then we have to add data - lakhs - opacity equals we're going to say zero and one the opacity is one and then we're say for a duration of just hundred instead of 400 so it's gonna fade out look a little bit more quickly it's gonna go to zero so now watch huh did you not work why are you not working did I save it yes I did what is going on div class line oh because I have two classes I'm an idiot there we go awesome all right so next up we have what's work in the mountains here in the trees the thing that really makes the effect come together so we'll come down here to our two image sources and again class we're gonna add Lacs to both of those and then we're going to have after that data - lakhs - translate y equals again zr1 here 400 and negative 100 so now we can see that this background mountains it's creating that effect already even without applying anything to the tree line because I the mountains themselves are changing up what I mean changing up it's going at a different speed than the scrool speed the defaults grow up a speed so we're already achieving this cool effect let's go ahead and add this just copy this and paste it right here and then change this up a little bit we're gonna do I about negative to 60 that's what I came up with again I was just experimenting because we wanted it to kind of come up here a little bit faster and then we need to get this this whole block right here moved up all the way up here and it has to fade in from opacity zero so that's the next step I believe it's the final step as well so we're gonna say locks right here cuz we're gonna do the whole thing to this whole class right here because it contains all this stuff and then we're gonna say data - lakhs - translate y equals zero zero 400 and negative 600 and then we also want to add opacity data - lacks black sea - opacity equals zero zero and 300 and then one so the opacity is going from zero to one so here we are we scroll and stump something's not right though oops yeah because I did that there we go check that out and that is pretty close to what we had in the actual figma prototype and if you wanted to make it like a smooth scroll you could actually I make it so that when a person Scrolls with it it'll automatically kind of come to this anchor point or so or this anchor and I it'll smooth scroll or if you had like a side one of those side navigations where it has like the dots you click on it then it will scroll automatically to this section you could do that as well if you wish all right awesome awesome stuff okay so hopefully you enjoyed that if you did once again give me a like and also most importantly subscribe because I'm going to do a guitar playing reveal at 500,000 subscribers we should be getting there very quickly subscribe subscribe to smash it all the time alright I'll see you guys real soon goodbye [Music] first very exciting news at the beginning of this tutorial first very exciting news I have ink first very exciting news I've integrated a very fast 60-second version of this tutorial here shortly after me giving my spiel for those of you who don't want to sit [Music] so now watch huh you do not work why are you not working did I save it yes I did what is going on oh because I have two classes I'm an idiot first a very exciting news now a very excite a a very exciting news