What do you want to learn?
Skip to main content
Enhancing Web UIs with Parallax Scrolling
by Anthony Harris
Scrolling effects on the Web are a great way to engage your audience. This course will take you through a variety of parallax scrolling techniques from basic to advanced.
Start CourseBookmarkAdd to Channel
Table of contents
The Origins of Styling Scroll
The Origins of Scrolling and the Upcoming Course Content
Simple CSS Techniques
Position Fixed Method
Background Attachment Fixed Method
For our second demo, we're going to look at an effect you can do with background images. Okay, so let's check out the second demo, which is a very similar concept to the first, but a little bit different. This concept is centered around background-attachment: fixed, and what this is going to do is let us leave our element in the flow of the page, but still display a background image that is fixed. So, what's going to happen is the element is going to act like a window, revealing the background image as it scrolls through the viewport. This method is going to let us do some really cool things with multiple images acting fixed during scrolling. Here is the Projects page, and we're going to look at some before and after images. And the effect is going to show the before image scrolling up and revealing the remodeled landscape. This has a very captivating look where the new replaces the old. Here is the styling for the images on this page, and the first thing that you can see is all of the background images being set. And then right below that, we have the shared styling, which is applied to every background image. The main declaration that we want to highlight here is background-attachment: fixed. This is what's allowing the element to stay in the flow of the page and scroll in and out while its background image appears fixed. Jumping back to the browser, you can see this effect is a really cool way to showcase something like a before and after. Let's look at one more example of this effect, and it includes full-width images that break up the page content. So we're looking at a Testimonials page here, and the idea is that each testimonial follows a banner image of that project. And as you can see, this simple effect makes scrolling the page much more interesting. And if we look at these styles, we'll see the exact same thing as the previous example with the background image being set above and then the global styles below with background-attachment: fixed working its magic. Coming up next, we have some major coolness. We're going to look at making elements scroll at different rates, using only CSS.
Advanced CSS Only Technique
The Basics of Making Elements Scroll at Different Rates
Now we're going to look at the Advanced CSS Technique, so it's a little more complicated, a little more to wrap your head around, but really cool results when you get it implemented. Before we dive into this effect, what will happen? What are we going to create here? Well, we're going to make elements be able to scroll either faster or slower than the base scrolling rate. So just to peak your interest about this technique, here's the final product that we're going to create, and you can see the different layers scrolling at different rates. When we consider the benefits for using this method, we're going to basically see the same thing as the simple CSS techniques. So to quickly summarize those, we have lightweight, easy for the browser to process it, no additional files needed, and no worries about the method changing. However, with this method, there's one thing that could kind of be considered a drawback, and it's not really a drawback, but it's important to know about. And so what it is, is to do this method, you need to put overflow: hidden on the html tag. That is crucial for this method to work correctly. So the reason why this is needed is it gets rid of a duplicate scrollbar that otherwise would be put on the element that we're going to refer to in this method as our parallax container. Now there's a pretty good chance that having overflow set to hidden on your html tag really isn't going to be an issue for you at all, and it isn't going to mess up anything on your website. But it's definitely worth bringing up, because it could cause some of your layout styling to get affected, and it also might affect some other scrolling effects that you're trying to do on the page. And like I said, it's just important to be aware of this, because you may implement this technique and it works great, and then later on down the road, you're making some other changes to your website, and you can't figure out why you're getting the behavior that you're getting, and it might be due to this overflow set to hidden. So let's familiarize ourselves with the basic HTML markup that we're going to need to execute this. We have this outer div here that gets the class of parallax, and this is what I'm going to refer to as the parallax container. This is our parent element, and it wraps all of our parallax layer elements, and as you can see, with the text that's inside of these parallax layer elements, the top one is going to scroll at the base rate, and the lower one we're going to make scroll slower. Let's look at the styles that we're going to put on the parallax and parallax__layer elements that are going to give it these magical scrolling abilities. So the first thing that we're doing at the top is we're setting the perspective and we're setting the height to 100 viewport units. If you're not familiar with viewport units, 100 vh is essentially the same thing as saying 100% the height of the viewport. This is a fairly new unit of measurement within CSS, and you have the ability to look at the viewport height or the viewport width. The next essential styles that we're applying are these overflow declarations. Now, overflow-y set to auto is going to allow the content inside our parent element to scroll the normal way, but descendent elements will be rendered relative to the fixed perspective that we've established. This is the key to getting this effect to work. Next we have the styles that are going to go on every parallax layer element, which are position: absolute, and then top, right, bottom, left: 0. The reason why position: absolute is needed here, when we think about it conceptually, is position: absolute takes our element out of the flow of the page where all of the base-level scrolling is happening, so if we want our element to scroll either faster or slower, obviously it can't be in the flow of the page, it needs position: absolute. The last step that's needed to get this effect working is for us to translate our child elements on the z-axis. So our base layer is getting translateZ(0), so we're keeping it scrolling at the default rate. Then we have our back parallax layer, and it's getting translate(-1px), so it's moving back into space away from the viewer. So here we are in the browser, and we're seeing these two elements, in fact, scroll at different rates. So right here we've got two parallax layers that are both using the same parallax container for their scrolling, and an important thing to notice here is right when they hit the middle of the screen, they do line up. So to gain a better idea of what's actually happening here, let's think about this conceptually. So here we have a very classic perspective example, and if we think about the orange box in the foreground as our parallax container, and the orange box in the background as one of our parallax layers, you can see how from our vantage point, the parallax layer appears to get smaller as it travels back into space. So the parallax container is like a window, and here the blue area represents what you're able to see around the parallax layer. So keep that blue area in mind, and we're going to switch to a 2-dimensional view. So here is what is would actually look like on a screen. We have the outer parallax container, the inner parallax layer back in space, and the blue representing what we can see outside the parallax layer. When we get rid of the blue, and we add some text to the bottom of these containers, it also helps illustrate this example. And a very important thing to note is that both of these pieces of text, the back text and the base text, are the same font size. The back text is just moved into space, making it appear smaller. If we were to position both of these pieces of text slightly below their containers, you can see that the back text would still be visible, but the base text would be out of view. I'm showing this text here with just reduced opacity, so you can still get an idea of its location, but it is out of view. So that's pretty much it. These two pieces of text are going to scroll through their respective containers, and the end result is going to appear like they scroll at a different rate. Coming up next, we're going to use this method to create a landscape scene with different layers that are going to create the illusion of depth as you scroll.
Creating a Landscape Scene with the Illusion of Depth
Creating Landscape Elements That Appear as the Page Scrolls
Using GSAP for Scrolling
The Basics of Creating a Common Tween
Examining the Demo Website Animation Created with GSAP
Review and Inspiration
Review of Techniques and Inspirational Websites
Anthony is a lead designer at SoCreate. He has worked in the web industry for 10 years and loves all aspects of the internet.
Released25 Apr 2017