Creating a Multi-Layer Parallax Effect

13 Jul, 2018

Last Updated: 23 Oct 2018

 

In this post I am going to walk you through the simplest way I have found for creating a parallax effect using very little code. Developers can jump straight to the code here.

You've probably seen parallax effects on plenty of websites but might not have known the term for it. Parallax is the effect in which different layers on the website scroll at different speeds, which creates a nice animated effect. 

Multi-Layer Parallax Effect

A simple parallax effect I created - details below

While parallax can be overwhelming if overused, when used in moderation it can keep visitors engaged with your content.

Parallax can be as simple as a fixed background image with content scrolling over it or multiple layers scrolling at different speeds (multi-layer parallax). Some examples of multi-layer parallax that I've enjoyed include: 

 

Firewatch Parallax

The Firewatch website

 

ROSA WordPress Theme Parallax

The ROSA WordPress theme

 

HuffPost Highline Parallax

This HuffPost Highline Article (somewhat seizure-inducing but a great read)

 

HubSpot Parallax

The HubSpot Battle of the Bots page

 

How will Parallax affect my Marketing?

Parallax can affect your marketing positively by adding interactivity to the user experience. Users may feel more engaged with your website and continue to scroll down to continue reading your content. Use it as a storytelling technique but use it sparsely, overdoing it might just have the opposite effect on users!

As with all aspects of design, you'll need to ensure that the experience also works for your mobile users, making sure that the graphics are of an appropriate size or disable that particular parallax effect on mobile devices.

One negative aspect of parallax is that it can increase page load time. However, this can be mitigated by using smaller-sized images in an SVG format. 

HubSpot write that speed, responsiveness and adding a lot of content to a single page could affect SEO when using parallax but, provided that you take these issues into consideration when designing a website using parallax, you can use the effect without any negative impact to your SEO.

 

Creating a Multi-Layer Parallax Effect (Code)

This part gets a little more technical but, by inspecting the websites above, you can see most of them use CSS translate transformation to move the different elements at varying speeds, usually achieved using a script that reacts to the page scroll.

Below is a simple example of a multi-layer parallax effect. While I found efficient code such as this CodePen by Patryk Zabielski, HubSpot is typically limited to vanilla HTML, CSS, JavaScript and HubL, so instead I based mine on Collin Delphia's CodePen here. I created the artwork on Adobe Illustrator based on the Animal Silhouette Moonlight Vector Illustration - Illustrator Tutorial by tutvid here.

 

HTML

The HTML for the parallax has two parent divs (one with id "parallax-container" and one with id "content"). The "parallax-container" div contains several divs with style tags containing a background image. 


<div id="parallax-container">
<div style="background: url([first-layer-image-url]);"></div>
<div style="background: url([second-layer-image-url]);"></div>
<div style="background: url([third-layer-image-url]);"></div>
<!-- Continue to add any other layer images -->
</div>

<div id="content">
<!-- Add your content here -->
</div>

 

CSS

In the CSS we'll add some basic positioning for the structure we've created above. 


#parallax-container {
display: block;
height: 750px; // This height can be adjusted here and below
}

#parallax-container div {
position: fixed;
top: 0;
background-position: center !important;
transform: translateY(0px);
height: 750px; // Keep this the same height as above
width: 100%;
}

#content {
position: relative;
}

 

JavaScript

The following snippet of JavaScript works when scrolling the page. On scroll, it adjusts the translateY CSS value for each of the images in your "parallax-container" div incrementally for each layer.


window.addEventListener('scroll', () => {
let parent = document.getElementById('parallax-container');
let children = parent.getElementsByTagName('div');
for(let i = 0; i < children.length; i++) {
children[i].style.transform = 'translateY(-' + (window.pageYOffset * i / children.length) + 'px)';
}
}, false)

 

You can view the final version of my own example below or in full page view here. Again, this code is based on Collin Delphia's CodePen here.

 

 

Create a Multi-Layer Parallax HubSpot Custom Module

If you would like to use the above code in the HubSpot CMS, you can do so using a custom module. In your HubSpot Design Manager, go to the folder you would like to save your file, click on File > New File, choose a Module, select Page templates and/or Blog templates and name your module.

Copy the code above using your own images. To keep HubSpot modular, I'd recommend removing the "content" div and CSS styling since you'll be adding this module to your page (bearing in mind that you'll need to make sure the content on your page has a relative position). Your module should look something like this: 

 

Multi-Layer Parallax HubSpot CMS Module

When using this module in a page it needs to be at the top of the page (since we've set it to have a fixed position and top: 0) and any content below needs to have a relative position and a background colour to cover the layers. For example, in the template below I've added the following inline styling to the flexible column below: 


position: relative; background-color: #030f33; padding: 50px;

HubSpot CMS Multi-Layer Parallax Module in a Template

And you can view the final result here.

 

I hope you've found some useful information on this post!  If you have any questions or comments, why not join the conversation below or get in touch with me directly?

 

New call-to-action

Topics: parallax, featured

Join the Conversation!

Do you have a question, feedback or comments on this post?