search

electerious / basicScroll

Standalone parallax scrolling for mobile and desktop with CSS variables.
https://basicscroll.electerious.com
MIT License
3.63k stars 148 forks source link

Parallax Image with Fixed Position #42

Closed markusdittrich closed 5 years ago

markusdittrich commented 5 years ago

Please consider the following fiddle: https://jsfiddle.net/e356rosq/

The images are supposed to appear fixed (by translating them opposed to the scroll direction). But unfortunately this looks a bit "choppy". Is there a way around this?

hacknug commented 5 years ago

Did you try using background-images with background-attachment: fixed; instead? It kinda looks like you're trying to achieve that exact same functionality.

markusdittrich commented 5 years ago

Yes that's exactly the functionality I'm trying to recreate. But unfortunately the mobile support for background-attachment: fixed; looks pretty dire: https://www.quirksmode.org/css/backgrounds-borders/mobile.html#t00

That's why I was hoping to use basicScroll.

hacknug commented 5 years ago

I don't think I've ever needed to use it, but your link states Last major update on 5 July 2016 and support (besides iOS), doesn't look that bad here: https://caniuse.com/#feat=background-attachment

Maybe you could check if the browser doesn't support it, and only then use basicScroll with transition: transform 0.1s;.

electerious commented 5 years ago

Animating something 100% against the scroll direction always looks choppy, because the JS executes after the scrolling, creating a small moment where scroll position and parallax adjustments aren't in sync.

I'm sadly not aware of a solution that could make your animation smoother :-/