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!

[ALsp]

I'm not sure I am seeing exactly what you want to do, but does this come close?

http://www.projectseven.com/products/tools/pch/whims/para-lax/

[Nancy OShea]

Parallax scrolling is one thing.

Bootstrap Parallax Template

What you're describing is something different.  Not sure but I think you want CSS animations that are triggered on scroll.

CSS3 Animate It - Animate Elements on Scroll

AOS: CSS-Driven "On Scroll" Animation Library | CSS-Tricks

Maybe something like this site?

The Bronze Collection by B&O | Bang & Olufsen

[Nancy OShea]

Orr possibly like this one?

https://moonfarmer.com/

[ALsp]

What you're describing is something different.  Not sure but I think you want CSS animations that are triggered on scroll.

CSS3 Animate It - Animate Elements on Scroll

I think I may have just had a seizure

[Nancy OShea]

ALsp  wrote

What you're describing is something different.  Not sure but I think you want CSS animations that are triggered on scroll.

CSS3 Animate It - Animate Elements on Scroll

I think I may have just had a seizure

I don't know why.  Isn't your Panache extension operating in the same terrain?

[ALsp]

No, Nancy. It is hardly the same. But I was just trying to be friendly... a little humor.

[Under S.]

My bad, I thought what I was describing was more common.

Imagine my container is 500px squared, but the background is 500px x 700px (so if centered, will bleed outside the container by 100px at the top, and 100px at the bottom).

When the container is at the bottom of the viewport, the image is bottom-justified. At the top, top-justified. Centered in the middle, and proportionate to those three anchors at every other vertical point in said viewport.

I haven't dug too deep into this one because it's a commercial product and I'd rather just pick up the skill if it's simple enough, but there's an example at the top of this page.

(The slower something scrolls proportionately to the rest of the page, the further away from our eyeballs it seems.)

Most of my images are backgrounds of <a> and <div> tags (and occasionally <span> when I'm feeling frisky). If I hide the overflow, the positioning alone should be able to handle the rest, right? Would something like jQuery be needed to handle the "vertically position background according to vertical position in viewport" part?

[BenPleysier]

Have a look at (CSS) Make a background image scroll slower than everything else - Stack Overflow

[Under S.]

BenPleysier  wrote

Have a look at (CSS) Make a background image scroll slower than everything else - Stack Overflow

Not the body, though.

Independent elements, like <a> or <div>
(Displayed as blocks, usually inline.)
Several in the same page, even.

[BenPleysier]

Not sure I understand the answer. I thought, seeing your commercial example, that this article would cover it. Did you have a look at the example in the article, namely https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Edit: OK, I get it, you want individual elements to have the parallax effect. Sorry about the misunderstanding.

[Nancy OShea]

Your example site (halfway down the page) is using 11 separate image layers, not including the text.  Although they might look like backgrounds, in reality they are foreground images.  Right click and select Inspect Element in your browser.

[Under S.]

https://forums.adobe.com/people/Nancy+OShea  wrote

Your example site (halfway down the page) is using 11 separate image layers, not including the text.  Although they might look like backgrounds, in reality they are foreground images.  Right click and select Inspect Element in your browser.

It wasn't meant to be used as a literal example. Here, let me use another one : Twitter's cover images, at the top of everyone's profiles. When you start scrolling, it scrolls too -- only a bit slower compared to the rest of the flow.

I would like to know if that effect is achievable on block elements, ideally their backgrounds <a> <div> <span> etc. where the background image of a div would scroll at a different speed than the rest of the page (but the overflow would be clipped off). In my example, I suggested a 700px tall background-image of a 500px tall container, so there's 100px at the top and bottom to work with.

Apologies for not knowing the right words to convey the idea, now you know why I had such a hard time finding help via Google. I wish I knew the precise terminology.

[W_J_T]

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

Here, let me use another one : Twitter's cover images, at the top of everyone's profiles. When you start scrolling, it scrolls too -- only a bit slower compared to the rest of the flow.

I would like to know if that effect is achievable on block elements, ideally their backgrounds <a> <div> <span> etc. where the background image of a div would scroll at a different speed than the rest of the page (but the overflow would be clipped off).

Sounds like you want something like this, see demo:

GitHub - nk-o/jarallax: NO dependencies JavaScript parallax scrolling

Unless you change your mind and description further? But given your last description that appears to be what you have described.

[ALsp]

Hi W_J_T...

I like the script. The only problem I see is in default configurations of Microsoft Edge (likely also IE11/10). The animation is extremely choppy. This is due to a known Microsoft bug with Windows smooth scrolling and how it is deployed in their browsers. We don't do any parallax animations, but I think I remembered seeing a workaround was available (other than the end user turning off smooth scrolling in the OS or browser). You might want to check it in Edge if you have access to Windows 10. It's kind of horrible

[Nancy OShea]

That's really bad in MS Edge.   It's looks fine in IE11, Chrome and FF.   But  I don't get the autoplaying videos in FF.  And since there are no player controls, I can't play them even if I wanted to.

[W_J_T]

Unfortunately many times scroll based and other animation effects have performance trouble somewhere across the spectrum of platforms and devices a user may arrive on. Especially when various effects are used excessively in multiples upon the same page.

Sadly IE/Edge both generally stand out further concerning lack of proper support for various things across browsers. But the presence of jerky / choppy reports can also be found across other platforms/devices under the issue reports for that library. Which is generally the case regarding animation and scroll effects when viewed by at least someone out there. Such effects should always be used sparingly and objectively, tested extensively and even disabled in various situations and upon various devices.

I was just curious if thats what the OP is looking for, like everyone else above. :--)

[W_J_T]

W_J_T  wrote

Sadly IE/Edge both generally stand out further concerning lack of proper support for various things across browsers.

Maybe some of the various lack of support, compatibility and performance issues will soon get better.

https://www.windowscentral.com/microsoft-building-chromium-powered-web-browser-windows-10

[Under S.]

W_J_T  wrote

I was just curious if thats what the OP is looking for, like everyone else above. :--)

Unfortunately, the atrocious behavior on Edge disqualifies it right out of the gate. I mean, there's poor performance, and then there's whatever I just saw, there.

As for what I'm looking for... I don't know how many more different ways I can describe it. Go to literally ANY Twitter profile with a cover image. See how it scrolls slightly more slowly than the rest of the page does? And does so more elegantly on Edge (and everywhere else) than that other page did?

I want to know whether or not this behavior can be applied to block element background images (so not the body tag like most parallax tutorials offer, but elements like div, span, a) and how complicated that would be. There would be several instances in the same web page, and it would only have to work vertically (the site doesn't move horizontally).

To achieve this effect, it's understood that you'd need a background image that's slightly taller than the container, so there are a few rows of pixels to reveal during upward or downward scrolling.

[BenPleysier · Accepted solution]

Have a look at paroller.js

[Under S.]

BenPleysier  wrote

Have a look at paroller.js

It's fascinating to test drive the demo on all 3 browsers, and compare how they handle mousewheel-scrolling v. scrollbar-scrolling. Surprisingly, it's Mozilla Firefox that handles the scrolling the best (or should I say, smoothest). Meanwhile, Edge struggles—mostly because that's what Edge does—and yet even there, not as much as with WJT's suggestion.

Conclusion : Without having actually tried it, at first glance this looks perfect. Thanks, Ben!

If I may push my luck a bit, while I have your attention... I found something in my own searches that seems to also do the job with minimal code. Since I'm more of a designer than coder, I'm not very familiar with the website, and context is lacking... but could you tell me whether or not this would also work reliably? And if so, which of the two seemingly-viable solutions you'd recommend? (I believe they both use JavaScript, so it would be more of a "random bit of code v. something more robust" dilemma at that point.)

[W_J_T]

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

I found something in my own searches that seems to also do the job with minimal code. Since I'm more of a designer than coder, I'm not very familiar with the website, and context is lacking... but could you tell me whether or not this would also work reliably?

Animating solely with background-position as seen in that example is resource intensive and to my knowledge forces repaint in all the browsers and relayout in some. So for these reasons its generally not optimal for performance and instead transform/translate are recommended and preferred. But again with either approach you will find landing devices which will not perform well regardless.

[Under S.]

W_J_T  wrote

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

I found something in my own searches that seems to also do the job with minimal code. Since I'm more of a designer than coder, I'm not very familiar with the website, and context is lacking... but could you tell me whether or not this would also work reliably?

Animating solely with background-position as seen in that example is resource intensive and to my knowledge forces repaint in all the browsers and relayout in some. So for these reasons its generally not optimal for performance and instead transform/translate are preferred. But again with either approach you will find landing devices which will not perform well regardless.

So your vote, given the two options, would be to go with paroller.js, which (if I understand correctly) DOES use the preferred transform/translate method. Is that correct?

Like I said, I don't need it to be perfect, I understand it won't be. I just need the best compromise available today. If you tell me that's paroller, I'm more than happy to go that way. It certainly performed fine, despite the demo using several instances at once.

[Nancy OShea]

W_J_T  wrote

Animating solely with background-position as seen in that example is resource intensive...

Right.  When a site is agile & fast, most people will tolerate minor imperfections.   But slow and poor performaning is a recipe for failure.  

GTmetrix | Website Speed and Performance Optimization

[pziecina]

If you view the effect on a twitter page that you wish to use, then you can select the div, (or whatever) using your browsers dev tools, to see what is being used to create that effect.

If it is done using css animations, then the browser that I have found to have the best dev tools for those is Firefox, if it is js driven than any browser but not IE will do.