Scrolling Effects: Parallax Header

by | Jun 24, 2018

Scrolling Effects: Parallax Header

by | Jun 24, 2018 | Web Development, ZRecent1, zveer

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

 

Perspective

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)

Movement

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.

With the help of a proper layout, some commonly used CSS and a little bit of JavaScript, we can create a pretty amazing effect and use it as our website homepage.

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.

See the Pen CSS Parallax by Veer Singh (@Veer19) on CodePen.dark

So how does this work.

The major portions I’m going to explain in the above code are as follows:

(I’m assuming that you’re familiar with the basics of HTML, CSS and JavaScript)

  • The Layout (Positioning the overlay image)
  • Fixed Background position.
  • Changing scroll speed with JavaScript.

 

 

The Layout

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)

 

 

FIxed Background

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”);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;

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.

 

 

Scroll Speed (JavaScript)

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.

Since the overlay image is in the middle of our perspective, we need to decrease its scroll speed. We can do this by using a function mentioned in the previous article of this series coupled with some basic CSS manipulations through JavaScript.

First, we get the overlay image through its CSS id.

document.getElementById(“overlay_image”);

Then we attach an onscroll funtion on the browser window. The code inside this function runs every time the user scrolls through our webpage.
window.onscroll= function(){
       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

By using just three lines of JavaScript code and some basic CSS, we have a pretty neat effect for our website headers. And that’s all for this article, next up I’ll talk about making stuff appear as the user scrolls through the webpage. Until then, keep creating!

 

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More from this Category