Streaming live at 10am (PST)

Trouble with fixed bg effect on mobile


#1

Hi there, firstoff: apologies if this is a dupe - I'm a newb and my search didn't yield an obvious answer.

I was really inspired by the History of Animation site (http://history-of-animation.webflow.io/) featured in the Animations and Interactions Webinar. I wanted to recreate the specific effect where Bugs Bunny fills with colour as you scroll down the page.

What I came up with works in the Webflow Designer/Preview for all views (desktop/tablet/landscape/portrait) and for all breakpoints. The scrolling effect does not work on my mobile phone - the background images come into view one after the other and the desired effect, which is to have the ladybug fill with colour, doesn't work.

Would appreciate any help.
Thanks in advance.


Here is my public share link:
https://preview.webflow.com/preview/6-red?preview=6303eccc9a0a233658e5ec8fa40f9fb5


#2

Fixed bg on mobile...

It's a long story. Safari used to not support them, some say it was a bug... Android ans iOS are supposed to show them now but it's such a mess sometimes, and so demanding on mobile devices that Webflow probably still deactivate it.

Took me an hour to find code for a fixed bg working in Safari iOS... and it works damn well.

https://joeyred.github.io/fixed-mobile-background-demo/

The codepen is here:

It works on webflow but for reason I ignore you have to declare the bg image in the custom code too.


#3

Hey, thanks so much for the help!

I've applied the codepen to my custom code head area, replacing the original url with the link to my first image - - not exactly sure how to apply it to the second one (http://uploads.webflow.com/5706d4d62eade0f163157deb/57f078b16ceee4687293a11f_ladybug-1472604.jpg). Should I duplicate all the code for the second image? I'm just a beginner where the coding is concerned, so I could really use the guidance :slight_smile:

Thanks again!


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.