Scrolling Effects: Parallax Header
Scrolling Effects: Parallax Header
One of the main principles of web design is to make your products as “human” as possible. Long gone are the times when the websites we used were just collections of data and information with negligible design concepts used in creating them. In today’s world, a designer strives to make his/her website as close to the real world as possible.
What is Parallax?
Parallax is just an implementation of real world perspective and apparent movement of objects in design.
But where do we experience parallax in real life?
Imagine yourself sitting on a still train, you see different objects at different distances from you. The platform is the closest, the benches in the middle and (let’s say) the clock on the wall is the farthest thing in your view.
You are viewing these objects with a Perspective.
Now, as the train starts to move, you can sense these objects moving at different speeds. The closest object moves fastest and the speed keeps decreasing as we move to the far away clock on the wall.
Implementation of Parallax in Design
To give the user a perspective, we use different objects placed over one another in a layout. You can even blur some of the elements to create more depth in your composition. ( too lazy to do that in this example)
The only way we really move in a website is through scrolling. Therefore, by changing the scrolling speeds of certain elements, we create more of the depth and perspective we talked about previously.
The Code behind it all.
I’ve created a project on Codepen (check out my previous article to get to know the awesomeness of this platform) and I will be using it as an example to demonstrate the most basic type of parallax effect.
So how does this work.
The major portions I’m going to explain in the above code are as follows:
- The Layout (Positioning the overlay image)
- Fixed Background position.
Using a full width <div> element for the background with text-align:center; , I created a heading with an <h1> tag. Below that is the overlay image which is positioned absolute at the bottom of its container.
In this example, I’ve considered the heading to be closest element and the overlay image to be in the middle.
(notice how the heading stays on top of the image with its z-index: 2 property)
The background image of the container <div> has a background with a fixed attachment to it. The code for the background looks something like this
background-image: url(“Image URL”);
Due to the “fixed” attachment, the background remains still even as the user scrolls. This gives the illusion of it being very far away in perspective.
Our last task is to alter the scrolling speed of the elements that are closer to us. The closest element in this layout is the text, so we can let it scroll at the normal speed.
First, we get the overlay image through its CSS id.
Then we attach an onscroll funtion on the browser window. The code inside this function runs every time the user scrolls through our webpage.
overlayImage.style.transform = “translateY(“+this.scrollY/2+”px)”;
Here, we manipulate the transform: translateY() property of the overlayImage and whenever the image scrolls in the upward direction, we bring it down by half of the scrolled pixels. This results in the image moving at half of its normal speed.
And we have already fixed the farthest object in our perspective, the background.
AND WE’RE DONE
More from this Category
Codepen is an excellent resource for any aspiring web developer/ designer. Dive into the many of its features and make maximum use of it.
Go through the steps needed to start developing