Parallax Landing Page - Rellax.js

Key Takeaways

[Music] hey guys in this video we're gonna create a landing page that uses the parallax scrolling effect and we're gonna do this with the help of a very lightweight JavaScript library called the relax j/s and this is what we'll be building it's be the design is based off of the flick so website and what parallax does is it's it's a technique where you can have your foreground elements move at a different pace in the background and it gives it this really cool depth effect almost like a like a 3d type thing so if we go ahead and we start to scroll down you'll notice that the foreground elements move at a different pace which gives it that depth perception so basically we can set elements to have that effect and also change the speed so these here are going quite fast while this image is really slow and just kind of stays on the screen and then these at the bottom here these three blocks these are all set to different speeds which gives it this kind of staircase effect as we scroll down alright so I mean you can do some really cool stuff obviously this is a pretty simple example but you can get really intricate and have some really cool effects using parallax and this is the relaxed j/s website it's pretty simple to use we just initialize it with the class we use that class and then we can actually add specific speeds through attributes which can be from anywhere from negative 10 to positive 10 so that's what we'll be doing let's go ahead and jump into vs code I just have an index.html and a style CSS which are empty and then three images BG one which is a jpg BG two which is a PNG they just these people here and then the this play button PNG image as well and I'll have all the code in the description inside of a code pen now I am gonna type out all the HTML and then I'll do some copying and pasting with the CSS just to kind of move along a little bit here but I do like to do things from scratch I like you to have a project that you can code along with me so let's go ahead and just start with the HTML I'm gonna go ahead and create a boilerplate here and let's say parallax landing page and we'll go ahead and add our link to our style sheet which is right in the root and then I'm also going to be using font awesome so let's grab that I'm gonna go to CDN je s comm and search for font awesome and I'm gonna use the CSS link here so it's just copy link tag and we'll put that right in there we can also grab the relax j/s library CDN from here as well so if we just search for our e ll a X WIPs X and grab let's grab the minified version here copy the script tag and put that right in the body at the bottom now we will have a script tag here where we in it or initialize the relax library but I'm gonna do that after we create the initial website so as far as the HTML it's pretty simple we basically just have three sections oops we have this section here this one and then the grid here and then the footer so this shouldn't take too long I'm just gonna go through this real quick so first section we'll use html5 section tag with a class of section top and inside here we'll have a div with the class of content and we also want to add the relax class because that's gonna basically tell the library that we want this to use that effect now inside here we're just going to have an h1 and we're gonna say community-driven or community-based driven website and then underneath that we'll have an a tag with a button class that is gonna go nowhere and then just say learn more so that's a first section the second one say section and we'll call this section - stream and this is going to have an image with the class of play this is the play big play button image which is also going to have that relax effect and let's link to the image so it's image slash and then the play button PNG now underneath that we want to have a div with the class of content and relax I don't know if it's relaxed or relics but in here we're gonna have two divs that are gonna have an h2 actually this h2 we're gonna give a class of text or not text secondary - text because I wanted to have that yellow head that yellow color and we'll say stream everything everything and then a paragraph let's just do lorem 20 - give us 20 words here now this div we're gonna have two of these so I'm going to copy that down and we're just gonna change the the title here let's change this to what is a short is the new long okay so that's the second section the next one is going to be that the three cards and we're gonna use the grid to align that so let's do section and I'll call this section - grid and inside here we're gonna have three divs with the class of relax because they're all going to have that effect and they're all actually gonna have different speeds and I'll show you how we can change the speeds later on so we'll have an icon with FAS and let's do what else FA - video for this icon and FA - 3x which will change the size and then also I want to use my secondary - text here because I want the the icons to be yellow and underneath that will have an h2 with a watch and then a span with the class of secondary - text and also a class of dot because we have this period here so if I show you down here right here where I want to actually just increase the font size and change it to a yellow color so underneath the h2 we have a paragraph let's say lorem 20 and then we need three of these so we'll just copy this down time's the second one is going to have a an icon of users and we're gonna change the text from watch to share okay and this one down here will change to learn and the icon is gonna be FA - book okay and then last thing we want is the footer which is really simple it's just basically a footer tag with a UL so I'm just gonna paste that in okay so we'll go ahead and save that let's open this up with live server and that's what its gonna look like okay now we're gonna jump into the CSS and I'm gonna paste the most of this stuff in however I'll just I'll paste it in and I'll go over it so first thing we want to do is import our font we're using this montserrat monterrey font here and then we're gonna set some variables or some CSS custom properties so on the root scope we're setting the primarycolour secondarycolour to yellow and the text color to this light purple alright now as far as I guess the base styles go we're just gonna paste in a simple reset setting the box sizing to border box resetting the margin and padding implementing our font in the body the background color is the primary color font size 18 we're just adding margin bottom to our headings in paragraph and then removing the underline from our links and removing any bullet points from us and that's what it's gonna look like so far okay so next we're gonna do the button so we have a class of BTN and we're just displaying inline block we're setting the secondary color which is yellow as the background rounding the corners adding the padding upper casing everything font size on hover we're just gonna scale it down a little bit so if I save that you can see our button we have a little scale effect and we hover over it so pretty simple we also have a couple utility classes for text so primary text secondary text is just going to set the color you know to that color so we have that implemented here as well as on the icons this secondary text now the sections remember we have this broken up we have this section here section top section stream which is this here and then section grid which is these three elements here so each section is going to be positioned relative because the stuff inside for the most part is going to be positioned absolute within that section so we have to make sure we set this to relative and then we're just adding some padding on the sides now we'll start off with section top so let me just grab this real quick so section top I just put a comment here we have a minimum height of 500 pixels we're adding bg1 is our background image the heading we're making the font size really large and then the content part is going to be positioned absolute from 100 from the top 70 from the right and we're setting the width to 50% so if I save that let's see why is the image not showing I'm sorry it's IMG there we go so we have the background image and we have this so this heading and the button is the content and it's positioned absolute within the relative section okay so pretty simple next thing we're gonna do is the section stream so let me just grab that real quick all right so let me just go through this section stream this time we're setting a minimum height of 700 pixels and we're using BG 2 as our background h2 font size the play button is going to be positioned absolute on the left so 80 pixels from the left with is 25% the content which is the two text areas are going to be positioned absolute on the right side and then each div within the content I'm just setting a light translucent background with padding and border radius so we'll save that that's what it's going to look like so this is positioned absolute over here this is over here we have some styling here all right now for the grid part of this let's go ahead and grab the section grid stuff I don't like copying and pasting but I didn't want to spend too much time writing out the CSS so section grid we're displaying as a grid so we have three items inside right so we have right here we have these three divs which all have the the relaxed class and we're just setting the columns to repeat three one fraction which means it's three even columns grid Gap section grid icon we don't actually need that anymore because we use the secondary text class on the icons the paragraph I'm using that text color which is the light purple and then the dot I'm just using font size 40 pixels we don't actually need that so let's save and now you can see that these are aligned in the grid now I want to give each one of these the same design as this so this this rounded corner background so what I'll do is go up to right here and just add in what is it section - grid and then the direct divs I want to give that same style so now they have that background all right now the footer is really simple so we're just gonna go ahead and paste that and so the footer we're just setting a border top padding margin and then the UL we're just setting to flex and we want to justify the the remaining space the content to space around so that it gets put around each flex item each link okay and that's pretty much it as far as the desktop version goes we will be adding some media queries but we're going to do that after because we're actually going to set different speeds based on the width of the website as well so now let's go ahead and implement relax so our parallax so down here we want to initialize the library by setting a variable of relax equal to a new relax object and this is going to take in the class that we want to use which is going to be our relaxed class now once I save this we should get the effect so you can see that the background is moving at a different pace for all the elements don't worry about this this actually runs into the footer but when we change the speeds it actually positions them and it puts them in different positions and they move at different paces so that's what we want to do now is kind of change that stuff up I mean this isn't too bad obviously except for this part here but to change the speed let's go up to the first element which is the content inside section top which is this right here and we want to set on this an attribute okay so in addition to the class we want to set data - relaxed speed and if I set this to let's say 10 which is the max and we scroll down you see how fast it goes up now if I set it to negative 10 which is the lowest on the other side and I scroll it just kind of stays there it's very very slow to go up and it just stays on the screen basically so you can go from negative 10 positive 10 I want this set to 5 so what that's gonna do is make it go up pretty quickly but that's what I want and then I want this to go up quickly as well and in fact I wanted to go even faster so I'm gonna take let's just copy this and go to my content that's in section stream and I want to add I want to make that faster I'm gonna make it 10 ok so now when I scroll notice that this this is starting to catch up with this because it's moving faster okay so it kind of it narrows that gap in between and you can obviously experiment with it and change things around this button over here I want to go very slow in fact I mean we could probably leave it where it is but I'm gonna make it negative 1 so for the play so we already have the class relaxed which adds the effect but I'm gonna make this negative 1 ok so that moves you know very slow basically just stays on the screen the whole time now these down here I want to set all to different speeds because I want them to have that staircase effect so let's go to the grid section grid and each of these divs here we need to add the speed attribute okay so we get that one that one and that one and I mean if we kept them all the same so I cats at 10 right now so it's gonna come up really fast we don't want 10 we want them all to be different so the first one I'm gonna set to 1 and then the next one will be a little faster so the next one here let's do 4 and then the third one I'm gonna do 7 so that way you can see that they move at different paces and they end up in different places ok so I mean that's that's pretty much how this works and of course you could come up with your own design and do some stuff that's even cooler but I mean that's that's how it works we have the speed now we can also add certain speeds for certain um widths so if we go to let's go back to the website here actually I don't know if it shows it in the website I think we have to go to the github and there's there's all types of options you can add as well so right here so this is what we're gonna end up using is the XS extra small because we only want this for like really small mobile screens there is a mobile but that's for tablets too that's like I don't know 700 pixels or something or maybe even higher but there's a tablet for just tablets there's a desktop so there's different responsive speeds here that we can use now before we even get into that I want to make this change some of the CSS in the media query I mean this looks pretty good but once we get to you know once we get really small like a molt like a phone things start running into each other because everything is positioned absolute so we're gonna add some media queries so let's go back to our CSS and down at the bottom here let's say mobile we'll say media and we want to do a max width of 700 pixels so anything under 700 pixels this will take effect now the stuff that's positioned absolute I'm gonna set to static which is just a default so it's not going to be absolute anymore and it's gonna reach a hundred percent with so if I save that now this stuff is just static which is you know the default position now the static top I'm sorry the section top the the minimum height is 500 pixels by default so if we look up here section top we have a minimum height of 500 I'm going to shorten that to 200 and also just add some padding on the top now the content I want to align to the center and I also want to make the h1 smaller so let me just paste that in okay so now it's aligned center and the h1 is now 45 instead of 70 for the stream power section stream which is this image and then these this text here I'm gonna set the minimum height from 700 to 400 and the play button I'm gonna set the width to 50 display it as a block so I can use margin and center it and just add 30 pixels on the top and bottom so right now even with the speeds that we have set I think it's it looks pretty good I actually like how it goes over the image even though it's a little unreadable if it's like right over it but I kind of like that effect so I'm gonna leave it now the grid if we go down here we don't want three columns on this screen size so what we'll do is we'll just set it to display block and take away any margin so whoops if I save that now it's there you know they're stacked but they're there running into each other because of the speed that we set which so we're gonna have to change that but the last thing I want to do here is just the footer instead of having it display it as flex we'll display it as block so that it's on top of each other now that's it for the CSS so let's go ahead and implement the certain speeds for certain sizes now the first one we have is this content here which is a speed five I actually want to keep that so I'm not going to need to change this or add another attribute let's see what else the play button the play button is gonna be let's see it's it's negative one I'm actually going to set it to negative five for smaller screens so what I'll do is copy this and paste that in and just add in right here XS - and that's gonna pertain to only very small screens so I'll set that to negative five which will change it a little bit and keep it on the screen longer so it goes behind those two okay now let's see right here we have of ten for the what is this this is this right here and I'm going to keep that at ten so that's fine we definitely need to take care of this grid because as you can see they're just running into each other so we what we want to set them all to the same speed so let's add in here and say - X s and I'm gonna set them all to three so let's be one - let's grab this here and add it to the rest of these like that and this one here so save and now they're not running into each other anymore because the speed is the same for all three of them all right so I think that that's that's pretty good I mean if you want to change it up a little bit and experiment with the speeds and stuff you can but I think it looks pretty good so I will have link in the description to the code pen and just check it out use it in in different projects and see what you can come up with but that's it for this video and I will see you in the next one thanks guys