What is it?
Parallax scrolling is the design concept to apply flat layers that move at different speeds to provide the illusion of depth. While not a new concept, the usage in web design has been growing as a way to make an app feel more interactive.
Where did it come from?
Date's back to the 1930 in early film. Specifically in animation to help provide depth. Here's a great example of how Disney used the concept in Bambi.
Easy to see why this would easily evolve into digital enviroments like video games and but and while very advanced versions are seen every day, so are simple version that apply to every day dev
Examples:
There are really simple ways to use parralax scrolling that you probably see dozens of times a day. Simple 2D scrolling effects can be an easy way to inject different content that stand out.
While the same principles and be layered and layered to create an immersive experience for the user.
From: isladjan
*Let's get started!
*
In this example, we just need some light HTML structure and that we'll be styling on top of.
<div class="parallax">
<div class="parallax-layer layer1">LAYER 1</div>
<div class="parallax-layer layer2">LAYER 2</div>
<div class="parallax-layer layer3">LAYER 3</div>
<div class="parallax-layer layer4">LAYER 4</div>
<div class="parallax-layer layer5">LAYER 5</div>
</div>
From here, we'll work entirely in CSS. Note there are many things you can do within JS to add even further, but for this basic example, sticking to one language is helpful to see the pieces all in one place.
The first line is how you should start every first line of CSS. Remove the default margin from your app.
body {
margin: 0;
}
Next, using the className from the HTML, we'll set our wrapper class the encompasses all of our layers.
.parallax {
height: 100vh;
overflow-x: hidden;
perspective: .5px;
}
height: We're setting this to the maximum view height to adapt to the screen that it's on. we set to the maximum so you don't have a gap on top or bottom which would ruin the illusion.
overflow-x: is how you'd like to handle horizontal overflow of this element should it be larger than the screen. "hidden" will ensure we don't get a sideways scroll due to this element.
Learn more about other overflow-x choices here.
perspective: in this 2D example, we use 1 as we aren't adding additional depth but this number is more crucial once you get into 2.5D and 3D.
Play with perspective on a 3D element here.
Now comes the fun part of depth. We've all mapped x/y coordinates on a flat plane before. Any adjustment to position of an element is exactly that. But mapping z coordinates is what plays into the perspective.
If you've ever bring-to-front/send-to-back in many programs, you've adjusted the Z-index of the element. Z is the third coordinated in the 3D model. We'll be using the transform property to change the objects z-index of our elements.
.layer1 {
transform: translateZ(0);
}
.layer2 {
transform: translateZ(-.5px);
}
.layer3 {
transform: translateZ(-2px);
}
.layer4 {
transform: translateZ(-5px);
}
.layer5 {
transform: translateZ(-7px);
}
We've now changed the Z coordinate RELATIVE to our wrapper class. Notice layer1 has 0 change. This is our static object and stays in place as you would normally have a fixed back-ground.
With each element I've gotten exponentially further away from layer1. Thing of how when looking down a hallway of a hotel. As you get further away the doors appear to be closer together, so to override that, you have to exponentially increase the distance to keep your objects staggered more evenly when looking via a 2D screen.
Adding some labels to our elements:
div {
font-size: 50px;
text-align: center;
}
Now we'll add some code that we'll want to adjust the settings of the wrapper but to just the specific layers drilling the classes.
.parallax-layer.layer1 {
width: 100%;
height: 100em;
background-color: pink;
}
As mentioned, the first layer is base so establishing it's 100% width, and setting a height of 100rem.
Keeping the with 100% is helpful in this example but adjusting the height allows you to see how the layers transition. Try using 100vh!
For the rest, change everything!
top: changing the distance form the top of the page can help create a tunnel effect if you exponentially increase at each layer.
Or maybe you want a layer to just float independently and only be visible after a certain amount of scrolling, here's where you can do that easily.
width: notice that the width are all 100%. That is 100% relative to the wrapper, which is 100vw. So as you get further away from the base, 100% does actually get smaller.
Keeping 100% helps with the tunnel but maybe you want a rising horizon that spans the whole page, change that here and you don't have to worry about overflow as the wrapper hides the horizontal scroll already.
color is pretty self-explanatory here but tinker away with color and opacity even. Using like colors that vary slightly in shad can help create the illusion of distance as things lose vibrancy in the distance.
.parallax-layer.layer2 {
top: 2rem;
width: 100%;
height: 110rem;
background-color: olive;
}
.parallax-layer.layer3 {
top: 10rem;
width: 100%;
height: 100rem;
background-color: plum;
}
.parallax-layer.layer4 {
top: 50rem;
width: 100%;
height: 100rem;
background-color: yellow;
}
.parallax-layer.layer5 {
top: 75rem;
width: 100%;
height: 100rem;
background-color: lightBlue;
}
After examples:
https://speckyboy.com/css-javascript-parallax-scrolling/
To better understand 2.5D sometimes it can be helpful to learn more about 3d rendering.
https://codepen.io/ewahda/full/OwEGyV
Extremely helpful though advanced source:
https://blog.logrocket.com/create-parallax-scrolling-css/#scaling-design
Top comments (0)