As website designers and developers we are always looking for cool and unique ways to add some sex appeal to our website designs. A trend that is gaining significant momentum in the website design community is parallax scrolling. If you are unfamiliar with the term then here is a simple definition. Parallax scrolling is a technique that creates the illusion of depth for the viewer by having background images remain fixed or move at a slower rate than foreground images. This technique if used sparingly and in the right contexts can be great for visual storytelling and user engagement. In this blog post I would like to discuss: reasons to use parallax scrolling, a customer use case, and then how to implement the technique with the HubSpot COS. So let’s get started.

When To Use Parallax

As I stated in the introduction, parallax is a cool technique that you can use to enhance your website designs. However there are appropriate and inappropriate times to use the technique. Below are a some great use cases for parallax scrolling:

1. Visual Storytelling: A great use case for parallax scrolling is when you need to tell a story. This story can be about anything: your product, service or non-profit. The parallax technique enhances your ability to tell your story by creating an engaging and interactive environment for your web visitors. You can create parallax designs that allow your visitor to walk through your story at their own pace.

2. Enhanced Engagement: Another great reason to use parallax scrolling in your HubSpot COS designs is that it enhances web visitor engagement. Parallax site designs put the visitor in-charge as things happen as the user proactively scrolls up and down on different site pages.

3. Drive Visitors To CTA’s: Finally, parallax can be a great way to funnel your website visitors to calls-to-action. Parallax designs, more so than other website layouts, have the ability to guide visitors to a “final destination” on the site. So think through how you can use parallax to guide site visitors to an engaging call-to-action.

Customer Use-Case

I recently built out a HubSpot COS site where my client wanted parallax scrolling functionality built into every page. Their reasoning for building the site around parallax surrounded visual storytelling and enhanced user engagement. The non-profit site, that is still in development is called The Human Right.

The website uses different fixed images in the background to showcase messages, people and places that are of importance to The Human Right. Website visitors are shown these fixed images as they scroll down through the each page on the website. Example pages below:

• Home Page

• Our Passion Page

• Video Page

Implementing Parallax Scrolling

When implementing parallax scrolling there are three components to completing the technique:

• HubSpot module configuration

• Writing the CSS

• Adding the classes to the modules

Let’s step through each process here:

Step 1 - Configuring the modules: To create the parallax effect the first step is grouping the modules in the HubSpot template builder. As seen below you want to place your parallax module inside the third section grouping. In this example it is the “Parallax Section One” module.

Step 2 - Writing The CSS: Once the modules have been grouped together the next step is writing the css in your stylesheet. Use the following snippet of code for your parallax section:

Let me explain each bit of code.

• Assign A Class: You can start out by creating any class that you want, I just chose the class .parallax-section-1 for organizational purposes.

• Background-size: Then you want to assign a background-size of “cover” to make sure that the parallax section will cover the width of the screen regardless of the monitor size.

• Background-position: You can position the background however you would like, in this example I chose “Center Center”.

• Background-Attachment: Make sure that you set your background attachment as “fixed” as this is what is going to create your parallax effect.

• Background-Repeat: make sure to set your background-repeat to “no-repeat” unless you want your background image to tile across the parallax section.

• Background Image: Finally, pull in your background image url here, you can get this through the HubSpot file manager.

Step 3 - Adding the classes to the modules: Once you have the CSS written in your stylesheet all you need to do is add the class to the appropriate module, and then set a height on your parallax module.

Step 4 - Add the class: Add the .parallax-section-1 class to the “section one” module, in the HubSpot template builder. As seen below:

Step 5 - Add a height dimension to the module named Parallax Section One. In my site design I set a height of 1000px. See below:

Step 6 - Once you have set the class on the appropriate module and the height dimension, you are good to go. Just refresh your site page and you should see your parallax section work properly.

Conclusion

As you can see parallax functionality creates an engaging 3d depth effect for your HubSpot site pages and landing page designs. Just remember to think through the goals of the site and landing page before you start implementing this technique. Finally, if parallax can help you increase user engagement and effective storytelling follow the steps above to implement this fun technique. Happy HubSpotting!

Want to see how you can implement a simple parallax effect on your website? Check out the documentation here.