FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 What Is Parallax Scrolling?

If you've been involved in front-end development for any time, you've probably heard the term 'parallax scrolling'. In this lesson, I'll show you what it is as we walk through a few examples online.

2.1 What Is Parallax Scrolling?

Hello, and welcome back to Scroll Events Made Easy. In this lesson, we're gonna start to talk about something called Parallax Scrolling. But before we jump into our first project, I wanna explain a little bit what parallax animation or parallax scrolling is, because there's a lot of confusion about what parallax scrolling is. If you do a search online for examples of parallax scrolling, you're gonna be confused by the results because you're gonna see websites like this one. Scroll for your health. Now, if I click on this first link here that says orange, we're gonna see an animation occur and it looks nice. This is a really nice looking website. And you're gonna see, as we look over here on the right where the scroll bar is, you're gonna see that, as these animations are occurring, that scroll bar is moving down. And again, as I mentioned, if you do a search on Google for parallax scrolling, these are the type of sites, these are the types of examples that are gonna pop up. But these aren't really, technically, parallax animations. They're really nice animations. But really, they're just scrolling animations. They're animations that are triggered, excuse me, when we scroll in the browser. We can come over here and grab the scroll bar and start scrolling up and down and we can see that animation taking place. So, a lot of people assume that a parallax animation is simply a scrolling animation, but that's not what a parallax animation is. When I think of a parallax animation, the easiest example to explain is when you're driving down the street. Let's say you're driving down the highway in Colorado. You've got the mountains in the background, you've got the trees in the foreground. And as you look out your window, the trees seem to be moving a lot faster than the mountains in the background. And it's that perceived difference in speed that gives the landscape its depth. And, a parallax animation is an animation that achieves this effect. It's really just an animation where you have a foreground that's scrolling or moving faster than the background. So, you can have a parallax animation even if your page isn't scrolling. Scrolling is just one method that many people have used to achieve some of these parallax animations. So, let's jump over to a website that actually has a parallax animation on it, On this website, we can see right away that we have some sort of parallax going on because our background image is rotating, while we have all of these stars in the foreground that aren't moving at all. But if we were to scroll down, I'm gonna click on these arrows, and you're gonna see, first of all, that our scroll bar is going to move down as the rest of our content animates. So, watch the speed of the foreground stars in relation to the speed of the background image. So, I'm gonna click on the down arrow and as it animates up, you can see that the stars in the foreground are moving much faster than the stars in the background, and that gives us a sense of depth that makes us feel like the foreground stars are closer to us. And, if we keep scrolling down here, we'll find another set of arrows we can click on, and that will continue the animation down further. So, as we animate down, as the window scrolls down, you can see all of these items that are moving up at different speeds. We saw the background animation. We saw the stars. We saw these asteroids that were moving even faster. And that gave us the perception that those asteroids were really close to us. And, that's what a parallax animation technically is. It's not a parallax animation just because it's triggered on a scroll event. It's a parallax animation because you've got two things moving at different speeds. And, that's what we're gonna be talking about for our first project. So, if we go back to the parralax.js website, and we'll include the URL for this website in the course notes, we can see an example of what this particular plugin or what this particular JavaScript library does for us. By default, when we just look at the page, it looks like a normal web page. We've got some text at the top, we've got an image right below it. But as we scroll down, we can see that the image is scrolling up and down with the page, but it's scrolling at a much slower rate than the rest of the page. And, that's really all this simple plugin is designed to do. It's meant to give us this nice, subtle animation that happens in the background, that gives us a sense of depth to the page, and it really catches the user's eye as they scroll up and down the page. And so, this is the type of effect we're going to be achieving using this jQuery plugin. This very simple parallax effect where we have a background image moving at a slower rate than the rest of the page. So, as we move forward, we're gonna learn how to do this without having to write any JavaScript of our own. So, thank you for watching and we'll get started in the next lesson.

Back to the top