Simple but specific parallax scrolling question...

[Under S.]

It's a jungle of parallax scrolling tutorials out there, but I can't find the right keywords to narrow it down to what I specifically need, which is : how do I make the contents of a div scroll slightly more slowly than the rest of the page, to give the impression that said contents exist one level below (in a virtual 3D space)?

(Not fixed, not sideways, not following the mouse cursor... just a simple "scroll slower" space following the flow of the layout.)

If this can only be done with an image (and not "the contents of a div") then can it be a background image? I pretty much gave up on straight <IMG> tags altogether and switched to background references years ago.

Thanks!

[W_J_T]

https://forums.adobe.com/people/Under+S.  wrote

Go to literally ANY Twitter profile with a cover image. See how it scrolls slightly more slowly than the rest of the page does?

Since you are concerned with Edge, have you also tested across various other devices? On various iOS versions and devices the scroll effects on Twitter are likewise not working at all. So if that is your standard bearer, then its a good example of how such effects and implementations will yield different results for different users on various landing devices.

The same can be said for virtually any approach especially when using multiple instances. Paroller which Ben referred to likewise has performance issues across various devices. So you will need to understand this no matter what approach you take.

https://forums.adobe.com/people/Under+S.  wrote

There would be several instances in the same web page

Then you can assuredly expect poor performance for some users no matter what approach you decide upon. This is true with CSS or JS or a combination of leveraging each together. As I already mentioned above, users will encounter performance trouble somewhere across the spectrum of platforms and devices a user may arrive on. So plan accordingly and deploy responsibly, know your audience and optimize to the best experience for everyone, regardless of device or OS.

[Under S.]

W_J_T  wrote

https://forums.adobe.com/people/Under+S.   wrote

Go to literally ANY Twitter profile with a cover image. See how it scrolls slightly more slowly than the rest of the page does?

Since you are concerned with Edge, have you also tested across various other devices? On various iOS versions and devices the scroll effects on Twitter are likewise not working at all. So if that is your standard bearer, then its a good example of how such effects and implementations will yield different results for different users on various landing devices.

If you ask me, having the image scroll normally with the rest of the page is a more than adequate fallback.

This is not a usability issue, this is strictly esthetic, as there is nothing that will "break" if the image just scrolls normally. Had Twitter's model collapsed entirely on mobile, that would be a concern... but "regular" behavior is an acceptable fallback for ANY purely-esthetic enhancement, in my opinion.

And if I was good enough to deconstruct and disassemble code on my own, I probably wouldn't be here asking basic questions. I appreciate your help, you guys are taking time out of your day to help randoms for free, that's never lost on me. It's why I keep referring to the regular helpers as superheroes.

Think we found what we were looking for in the end. It's still not perfect, I don't expect it to be, and I haven't applied it yet, so who knows how that will go... but it seems to be the best available compromise in 2018 for what I'm looking to do. (And it comes with a tutorial!)