When it comes to landing pages, visitors have become accustomed to seeing basically the same layout over and over again. The typical landing page contains a headline, offer, image, form, and an overview paragraph. These are all tried and true components for driving conversions for businesses large and small. 

However, sometimes you want to present your visitor with something new, fresh and unique to help drive engagement. In this blog post, I would like to showcase a new parallax technique that is great for storytelling on your landing pages. 

Create an Engaging Story for your Brand & Products

This type of landing page is better utilized to tell a story or communicate a longer message with text; it is not necessarily geared at driving conversions. 

The storytelling landing page is great for clients who are launching a new product and want to give the story behind the product in a unique and user-friendly way. The technique utilizes parallax scrolling (http://designers.hubspot.com/blog/implement-parallax-using-with-cos), a very popular web technique, in a slightly different way. The parallax scrolling only affects the text on the landing page while the image remains static and unmoved. As the user scrolls down the page, the picture remains the main center focus while additional, new text appears until the user finishes reading the story. 

How to Implement the Landing Page

Let’s look at how to implement this technique on your HubSpot COS landing pages and site pages. It breaks down into 3 main parts: the modules, the css and the javascript. We explain each one in detail below: 

The Module Setup

The setup of the modules has two horizontal spacers on the left and right and two rich text modules nested inside of three groups. This is a very basic setup and you can make variations of this for your own landing page.

The reason that I have two rich text modules setup instead of one is because I’m using a different script font family in the header. However, you wouldn’t necessarily need two modules.

The CSS

To make this technique work you need the following CSS attached to the top module group in your template builder. You can create a class in your stylesheet like below:

.YourClassName{

background-image:url('http://cdn2.hubspot.net/hub/317971/file-1153811010-jpg/Labs/Babe.jpg');

height:100vh;

position:fixed;

background-size:cover;

}

Or you could attach the CSS right to the module in the template builder.

This CSS code snippet is doing the following things: 

• Selecting the background image 
• Securing the height of the image to be the full viewport of the browser 
• Setting the position to fixed 
• Making sure that the background image covers the entire page

The Javascript

The final thing that you’ll need to do is attach this piece of Javascript to the head section in your template builder. Find the code snippet below. 

You’ll need to call your own CSS class in the Javascript code:

This will enable the parallax effect to take effect for your page:

And it's as simple as that! You now have this effect for your HubSpot COS landing pages. Let me know in the comments below if you have any questions about how to implement this technique. Happy HubSpotting! 

Interested in making your COS site even more engaging for visitors? Then check out our HubSpot tutorials to take your site to the next level.