<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=149034655494227&amp;ev=PageView&amp;noscript=1">

The Righteous Guide For Parallax Design On HubSpot COS/CMS

April 25, 2017 | Dev Shah

Parallax has redefined the levels of interactivity in user experience. Marketers, designers, and developers constantly scratch their heads to make their web appearance more appealing and customized parallax has all that is required to create a compelling experience for the target audience.

What is a Parallax Design?

Parallax scrolling is the special technique used with graphics and animation to simulate motion with background images moving at a differing rate than the foreground images, for a striking visual effect that sets up a great platform for memorable storytelling.

Parallax Scrolling Comes With Its Own Divinity

  • It provides a visually appealing experience to viewers with page depth and animation.
  • Parallax could guide website visitors with a story-telling approach and draw their attention to vital parts of the page, including content and call-to-action.
  • Increase engagement rate as an enticing parallax website will make the visitors scroll the entire page.
  • The action triggers are the situations wherein the visitor witnesses something appealingly new with every scroll. This promise is very motivating and the visitors want more of such surprises.

Are HubSpotters Empowered With The Parallax Dose?

As the parallax effect requires CSS and HTML coding, it is not directly possible to achieve it on HubSpot COS/CMS. An average user will find it difficult to implement parallax and background images. We have come across various forums where users have expressed their willingness of having a parallax type function within a COS/CMS module.  Here is one such thread we came across on HubSpot developers’ portal:

1-10.png

The Solution By HubMonks

You could build parallax using the following two plugins which have their own characteristics:

  • CSS3 based plugins
  • jQuery plugins

We have listed the steps required with both CSS3 and jQuery

  1. 1. CSS3

With the help of CSS3 plugins you could edit the background. The elements are light and could be used without any structural constraints.

At HubMonks, we scratched our heads and decided to create a demo parallax page.

We will now see how we achieved this effect with the help of CSS3.

a. Create HTML

2-9.pngThese three modules together will create the page given in our demo link.  The following script should be added in all the three modules respectively.

3-9.png

4-9.png

4.1.png

b. The following CSS code should be inserted in the header of the page to specify the image on which parallax will be applied at different locations:

6-6.png

 

 

Click Here For HubMonks Demo Of Parallax Design

 

The above given coding will help you in getting an image background for your parallax webpage. However, you will not get editability with this coding. In order to achieve an editable background, you could go with the following coding which requires a mix of CSS3 and jQuery.

Editable Background With CSS3

 a. Create HTML

There are 4 modules involved to achieve an editable background for a parallax background.

7-6.png

Insert the following code

8-4.png

9-1.png

10-2.png

  1. b. Create CSS:

11-3.png

In this case, you will need the help of jQuery script to convert the image into an editable background image.

  1. c. JS script

12-3.png

 

 

Click Here To View HubMonks Demo Of Parallax Design With Editable Background

 

2. jQuery

Custom Modules

The following steps will describe how to achieve parallax background on custom modules with jQuery:

a. Include the JS library

13.png

  1. b. Create structure

The following structure is created in the design manager for various sections of the parallax web page.

14.png

  1. c. Initialize the jQuery plugin

15.png

 

Click Here For HubMonks Parallax Webpage Built With Custom Module

 

The steps involved in creating a parallax web page with custom HTML and jQuery will be different. The following steps should be implemented for custom HTML.

Custom HTML

  1. a. Include JS library

16.png

  1. b. Create structure

17.png

c. Initialize the jQuery plugin

 

18.png

 

Click Here For HubMonks Demo Of Parallax Webpage Build With jQuery

 

Are you looking to implement parallax to your website?

You could contact HubMonks for more information on implementing a parallax background for your webpage. In case you have any query regarding the demo pages that we have created above and would love to have the same for your websites, feel free to contact us. You only need the help of skilled COS/CMS developers who could implement customized CSS3 and jQuery script to your website for an engaging parallax website.

 

Web Development

About

Dev Shah

Dev Shah

Dev is the Head of Marketing at HubMonks, a HubSpot content management system (CMS) partner for major inbound marketing agencies and brands. Dev utilizes and swears by the power of the HubSpot inbound marketing methodology. He loves to share valuable insights on HubSpot’s marketing software, content management system (CMS) and the best practices to set up successful inbound marketing campaigns.

Leave a Reply

GET A FREE INBOUND MARKETING AUDIT FROM MONKS

Want to know how to optimize your website to get more traffic and leads? Ask our certified inbound marketing specialist for a free one time assessment.

Recent Posts