Fix cloud scrolling on mobile

openclimatefix / website

Source of the Open Climate Fix website.

https://openclimatefix.org

MIT License

15 stars 11 forks source link

Fix cloud scrolling on mobile #24

Closed flowirtz closed 5 years ago

flowirtz commented 5 years ago

The cloud image on the landing page moves when scrolling. This does not work unfortunately on mobile however.

We should fix this so it also scrolls when scrolling on mobile.

drwm-base commented 5 years ago

I would like to attempt this bug, in addition to the one I worked on already.

EDIT: After looking into this, jQuery has no support for scrolling on mobile, so event listeners won't do it for you. You may want to look into alternatives, like having a constant animation instead.

flowirtz commented 5 years ago

Thanks @drwm-base. That's a good starting point.

ollicle commented 5 years ago

The scroll animation as it stands is creating significant “jank” (to use the technical term) when scrolling the page normally. The fixed width #clouds div appears to be the cause of a side scroll well beyond the page content (at least in Firefox). The improve performance I suggest:

Modify the background image (clouds_repeat.png) so it doesn’t need filter: invert(100%) or transparency to achieve the desired look. A JPEG will compress more effectively too. The png is over 700kb.
Consider a CSS only scroll effect with CSS background-attachment: fixed

flowirtz commented 5 years ago

Thanks @ollicle and yes, very good point about the image, it's way too big. I hacked this whole cloud thing together with my very limited CSS knowledge and never came around to cleaning it up.

About your second point: How would I achieved the scroll effect with b-attachment: fixed? I always thought the fixed just tells it to not scroll with the page. Wouldn't that be vertical and not horizontal?

ollicle commented 5 years ago

Correct, it would be a vertical effect. Perhaps not as fancy as the more surprising horizontal effect, although it will work on touch screens. The simplicity of the implementation makes it worth trying IMO.

flowirtz commented 5 years ago

Thanks @ollicle, played around with the attachment fixed and really liked it. The side-scrolling maybe was a bit cooler, but this way we don't have the weird bug of the image being suuuuper wide and breaking the page a bit plus it works on mobile as well. Yay. Thanks!

@all-contributors please add @ollicle for ideas

allcontributors[bot] commented 5 years ago

@FWirtz

I've put up a pull request to add @ollicle! :tada: