Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix cloud scrolling on mobile #24

Closed
FWirtz opened this issue Oct 26, 2019 · 7 comments
Closed

Fix cloud scrolling on mobile #24

FWirtz opened this issue Oct 26, 2019 · 7 comments

Comments

@FWirtz
Copy link
Contributor

@FWirtz FWirtz commented Oct 26, 2019

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

This comment has been minimized.

Copy link
Contributor

@drwm-base drwm-base commented Oct 28, 2019

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.

@FWirtz

This comment has been minimized.

Copy link
Contributor Author

@FWirtz FWirtz commented Oct 30, 2019

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

@ollicle

This comment has been minimized.

Copy link

@ollicle ollicle commented Nov 3, 2019

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
@FWirtz

This comment has been minimized.

Copy link
Contributor Author

@FWirtz FWirtz commented Nov 3, 2019

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

This comment has been minimized.

Copy link

@ollicle ollicle commented Nov 3, 2019

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.

FWirtz added a commit that referenced this issue Nov 4, 2019
Remove CSS manipulations of image by baking into source image

See #24.
@FWirtz FWirtz closed this in 566fe0c Nov 4, 2019
@FWirtz

This comment has been minimized.

Copy link
Contributor Author

@FWirtz FWirtz commented Nov 4, 2019

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

This comment has been minimized.

Copy link
Contributor

@allcontributors allcontributors bot commented Nov 4, 2019

@FWirtz

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.