Fixed bg mobile, parallax scrolling effect

Design help General
1

Is it possible to also have a kind of parallax scrolling on mobile?
It works on desktop, but not on mobile (when you view it on your own mobile) (the “action-section” with the text “Bekijk de [Amazon] expositie”)

It shows in the webflow preview mode, but not on a real phone.

Here is my site Read-Only: LINK
Public link: LINK

2 Likes
2

Hi @ElviraNL,

I am not sure what issue you are having? In preview I am able to see parallax scroll work in that section you highlighted.

3

@QA_Brandon What kind of mobile are you looking the preview on? On iPhone I don’t see the parallax effect.

4

I was using an XR and XS Max and on my 6S

I use browserstack for testing too

5

I’m having this issue too and searching all of the forums because setting a background image on a section or div “fixed” looks fine in preview, but then doesn’t work on mobile once the site is published.

From what I’ve found from a few years back in the forums, they’ve said it’s a browser support issue, but I feel like there must be a way to do this in Webflow!

1 Like
6

I guess you could build it with interactions, but that would be a hassle to do too…

Hope they’ll fix it soon. It looks amazing on Desktop, it’s sad that we can’t use it for mobile right now…

1 Like
7

I actually got a workaround working on mobile as well… the key was not setting the image as the section background, but rather adding a full width div with a HEIGHT OF 150%. Then I used an interaction on that same div for “while scrolling in view.”

For that interaction, I simply set the 0% to move the Y axis back 25% and at 100%, set the Y axis 25%. I can’t remember where I got the idea now, but it works on mobile well. I hope that might help!

31%20PM
31%20PM484×2512 70.8 KB

2 Likes
8

Thanks for sharing this. Could you elaborate a bit more? I tried adding this into my first instance of the scroll effect but couldn’t get it to work.

I can get the DivBlock to move (still only trying desktop), but my particular effect is the div is revealing a slice of an image that is sliding up … but the slice stays fixed on the page.

I have updated the first one based on this thread, but you’ll notice the desired effect from subsequent parallax sections.

Any tips by chance?

https://preview.webflow.com/preview/escape-collection?utm_medium=preview_link&utm_source=designer&utm_content=escape-collection&preview=08a8583adb5f817ecac70f0ae9cec9ab&workflow=preview