FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Parallax Backgrounds

With the parallax.js library, implementing the parallax scrolling effect is a question of adding the correct attributes to your HTML objects. In this lesson, I will demonstrate just how easy it is.

2.6 Parallax Backgrounds

Hello and welcome back to Scroll Events Made Easy. In this lesson we're gonna find out just how easy it is to create our own Parallax scrolling backgrounds. So let's go ahead and take our site03 folder, make a new copy of it, rename that copy. If we can grab it to site 04 and then drag site 04, down to brackets or open it whatever text editor you're using. And there's our index.html file. So, we talked before about these mysterious divs that we've created and, let me find it, here we go. It's this div, let me scroll over, it's this div right here with no classes or attributes applied to it. Now, I mentioned before, we are gonna be adding some attributes. But, there we go. So for now I'm gonna comment out our image text section. We'll take care of that later. For now I'm just gonna comment it out so we'll go to Edit, and toggle block comment so that that's no longer there and if we save that, go back to our browser and navigate to site 04/index. You'll see that our text disappears where we had it before with that semi-transparent background. But let's jump over to the Parallax website real quick to see what it takes to set this up. And we're gonna find out it's very, very easy. So we're gonna scroll down and watch that nice little Parallax background animation. And when we get past the installation section down to the Usage section, we can see it's very, very simple. You'll notice that this particular div here simply has a class of Parallax-window and we can actually give that whatever class name we want. There's nothing special about that class name, we just need something to help us style it or if we were to trigger this using JavaScript, if we wanted to point to the image we're using, using JavaScript we would need some kind of class or ID on that div so that we could use JavaScript as we see it down here. Now again, we're gonna avoid JavaScript for this particular course, so we're just gonna worry about getting it to work using these data attributes. So we are gonna use a class, we'll go ahead and use the Parallax-window class like they did and then we'll have to style that ourself. But then we have our data Parallax attribute, which we're gonna set equal to scroll. And our data image source attribute, which we're gonna set equal to the path of the image that we want to show up in the background. And that's really all we need to do, aside from applying a little bit more css, that's all we need to do to get this to work right. So let's jump back into our file. Let's go back over to our site here. And then we'll open up brackets one more time, and then let's make this happen. So, for our div, I'm gonna give this a class, just like they did of parallax, that's one R and two L's in parallex. We'll call it Parallax window. And then we have a couple of attributes that we need to apply. The first attribute is called data-parallax and we're gonna set that equal to scroll. And then our second attribute is called data-image-source or src. And then inside that attribute we're gonna type in the path to our image so you can see I already have our image folder opened up over here. And we can see the names of all of our images. So we're gonna point to the img/food-drink-3.jpg. So, by default right now, we've made our image invisible. We've basically just commented it out. If we were to save our page and go back to our website here, we wouldn't be able to see anything when we refreshed because we made our text invisible, so that particular div no longer has any height. So it's acting like there's no content inside that div, so we're not able to see the background image. But if we were to bring that text back, we we would be able to see the image in a small window. Let's save that and then let's refresh. And even now we can see as we scroll that that background image is moving at a slower rate. So you could stop right there if you wanted to but I wanna make this a little bit larger, so I'm gonna jump back into brackets, excuse me. We'll open up our css folder and go to main.css. And then after our image-text item there, I'm gonna create another class for parallex-window or I should say another rule for our parallex-window class. So I'm gonna give this a solid height of 500 pixels. And then we'll just give it a little bit of margin on the bottom because it's right now it's gonna bump up against some of this other content, so let's give it a margin bottom property of let's say 20 pixels. We'll save that and refresh our page and there we go. So now we really know everything we need to know about this framework. I mean that's really all it takes to make this really nice effect, where the background is scrolling at a different rate of speed than the rest of the content. And since that image is a background image, our text is floating over it nicely, with a dark background on it. But we can move that div around if we wanted to. If we wanted it to float over the center section of that image, we could do that. Let's jump back into brackets here and let's apply some more styles to our image text class. So we've given it a background color of kind of a transparent black. You'll notice it's also lined up over here on the left. We could make that float to the center if we wanted to. We could set the width of that image text to let's say 300 pixels and then set its margin to 0 auto. And that would kind of reduce the width and center a little bit. But I don't really wanna do that. I wanted to take up the full width. So I'm just kind of playing around with some ideas here. But let's change the positioning of it. I'm gonna set the position attribute equal to relative, and then we'll set the top value to a value of 150 pixels. So that will basically just move it down 150 pixels from where it used to be relative to where it used to be. So let's save that and then we'll go back to our browser and refresh. And now it's taking up the full width again and we can see that even when it's hovering down here it's still moving at a different rate of speed than the background image. And that looks really nice. So let's go ahead and do this for our other magical div that we have on our page. So let's go back to our HTML file, we'll scroll down, and I'm sure you can figure out how to do this for yourself. Here's our second image, and this one's not gonna have any content, we're not gonna have any text hovering over it. We're just gonna have our image. So we could actually save some space here. And put these divs on or these div tags on the same line. And here I'm gonna give this a class of parallax window, just like I did for the other one, so that it also will take up 500 pixels of height. And then just like we did before, we're gonna give it a data parallax attribute and set that equal to scroll, and this is just what we need to do to get it to work with the framework. And then we'll have data-image-src for source. And for that particular image, we're gonna point to our img/food-drink-4.jpg. And that's really all we need to do, so we can save that, jump back into our browser and refresh. And now as we scroll down we can see our second image here which again is still scrolling at a different speed than the rest of our page. So that's really all we need to do to get this really nice, really elegant effect to work in our browser. Now, obviously you might wanna spend some more time designing your page. The rest of the page isn't all that attractive. But considering we didn't do much css ourselves, it looks pretty nice, it's got some nice default styles in it, thanks to Bootstrap, but that's how you achieve this parallax scrolling effect with parallax.js. Thank you for watching and I'll see you in the next lesson.

Back to the top