topic Re: Recreating A Landing Page - Parallax Scrolling in CMS Development

Recreating A Landing Page - Parallax Scrolling

JHardy43 — Thu, 06 Apr 2023 13:40:33 GMT

Hi,

Im trying to recreate this landing page in HubSpot.

https://explore.sygnaturediscovery.com/invivo/

I have managed to do 90% of the work but I'm at a loss when it comes to adding the header image. I simply can't reproduce the functionality.

Does anyone have any suggestions on how I can achieve it with examples? I'm really struggling.

This is the page I have created.

https://info.sygnaturediscovery.com/google-ads-test

Re: Recreating A Landing Page - Parallax Scrolling

ankitparmar09 — Thu, 06 Apr 2023 14:10:02 GMT

Hello @JHardy43

Thanks for reaching out. Good question, but you can create the custom module 'Hero Banner'. It can good option for parallax image.

Thanks

Re: Recreating A Landing Page - Parallax Scrolling

Indra — Fri, 07 Apr 2023 08:17:16 GMT

Hi @JHardy43,

Do you have any experience with html and css? Otherwise I suggest to get in touch with a developer.

The option what you want is just adding a background image and set it to background-attachement: fixed.

CSS for it will look like this:

.section{ /* Setting the background image */ background: no-repeat center center url('image.jpg'); /* Setting the background image to fixed */ background-attachment: fixed; }

A working example can be seen at this codepen.

Re: Recreating A Landing Page - Parallax Scrolling

JHardy43 — Tue, 11 Apr 2023 08:16:59 GMT

That's amazing thank you! How do I make it so that the image spans the whole area? The width seems to be controlled by the height. The image boundary also seems to move on scroll.
https://info.sygnaturediscovery.com/google-ads-test?hs_preview=qafLEjDn-109493823764

Re: Recreating A Landing Page - Parallax Scrolling

JHardy43 — Tue, 11 Apr 2023 08:39:40 GMT

I may have sorted the width now thanks to your help! I don't suppose you know how to add a colour overlay to the image as well? I've tried stackoverflow but the options don't seem to be working.

.main-content{
/* Setting the background image */
background: no-repeat center center url("https://7062255.fs1.hubspotusercontent-na1.net/hubfs/7062255/GA%20BG.jpg");
background-size: cover;
/* Setting the background image to fixed */
background-attachment: fixed;
}

Re: Recreating A Landing Page - Parallax Scrolling

Indra — Tue, 11 Apr 2023 10:04:30 GMT

Hi @JHardy43,

Your template has 2 rows. The first is empty, the other has all content in it. For this way it's not possible to achieve your goal.

So bring your header to the first row and add the following css will do the trick.

.row-fluid-wrapper.row-depth-1.row-number-1 { background: no-repeat center center url(https://info.sygnaturediscovery.com/hubfs/GA%20BG%20OL.jpg); background-size: cover; background-attachment: fixed; }