Streaming live at 10am (PST)

Multiple parallaxing sections on mobile

#1

Hello everyone,

I am trying to get a similar effect on my mobile site that I have on desktop, where the backgrounds are fixed and content scrolls over. I am currently achieving this by having two sections for each actual section, one with just a fixed background and no content, and the next with the same fixed background an a panel of info. So, as you scroll, it comes up blank (just the image) and as you continue to scroll, the info comes up.

On mobile, however, each of these sections is static, and not fixing the background as I would like, resulting in repeated static blocks, that is very clunky and not good looking.

The fix I’ve come across is to set a div with absolute positioning, and lower the z-index so it sits behind the information. This is great if I only want one background on the whole site, but each panel should have a different background image. Is there a way to achieve this on mobile with multiple instances of a parallax effect?

Here is my read only link, so you can view my desktop site to see what I’m going for, and the mobile site can be viewed at cybertown.webflow.io (use a mobile device, as it appears to work in the Webflow Designer, but doesn’t actually in a mobile browser)