Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

The Righteous Guide For Parallax Design On HubSpot COS/CMS

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 WebbyMonks

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 WebbyMonks, 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

 

 

{{cta(‘94549d21-cb34-4012-88b1-72bd144c42d4’)}}

 

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

 

 

{{cta(‘603fbb00-596c-4b5f-b2bd-720c49aa7865’)}}

 

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

 

{{cta(‘caa8c3d0-fe94-4dad-a8fb-d7cb62238542’)}}

 

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

 

{{cta(‘da2216ec-d31c-46c5-b7d2-9e8b9ba0a0ca’)}}

 

Are you looking to implement parallax to your website?

You could contact WebbyMonks 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.

 

The following two tabs change content below.
Dev Shah

Dev Shah

Dev is the Head of Marketing for HubSpot Development at WebbyMonks where he helps agencies towards Inbound Marketing tips and lead nurturing mantras. 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

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

Get Quick Consultation

WCAG

Make outsourcing one of your strongest weapon to win the market competition. Get quality work with quick TAT.

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy