Parallax Header on landing page

Mark_Haynes
Level 1

Parallax Header on landing page

I'm attempting to implement a parallax hero image as discussed in an article at https://codyhouse.co/gem/parallax-hero-image/ a working example is at https://codyhouse.co/demo/parallax-hero-image/index.html

I've been able to replace the banner section on a template and testing locally is very satisfactory with a background image, foreground image and the Banner heading/subheading/call to action button appearing in proper z-index order with the two images rotating as the cursor is moved over the banner area. When I take the template into Marketo, validate and approve it, then create a landing page using the template, I'm able to set the background and foreground images, change the banner heading/subheading without any problem. After approving and closing, I then go to view the landing page, the parallax javascript works but the foreground image does not appear over the background image (it doesn't appear at all!), the banner heading, subheading and CTA button are displayed above (as opposed to over/on top of in z-index order) and the background image is shifted -169pixels in the x and -79pixels in y, revealing the banner background color. My landing page is at Parallax Hero Image | Stealth Monitoring. I have not yet posted the working copy on our server, but I'm curious as to why this would work on one environment and not in Marketo. Any thoughts?

Thanks for your input! 

1 REPLY 1
SanfordWhiteman
Level 10 - Community Moderator

Re: Parallax Header on landing page

Please move the thread to Products​ (Move link will be at the right) as this isn't a support space.