Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tw-fade: pure CSS scroll-driven edge masking

pete.design

Post reply on HN
Print view View original

31–37 of 37 posts

Re: Tw-fade: pure CSS scroll-driven edge masking

#31

Post by dag11 »

chrismorgan wrote: post #13

The fade affects scroll bars, which is quite unpleasant (and arguably catastrophic if you have two-dimensional scrolling). The traditional background-image technique avoided this by sitting inside the scroll area. I don’t think you can achieve that with mask, without an additional element. But I think it might be worth that extra element.

You can achieve that with a background-image, because you can stack multiple gradients.

Since this problem bothers me every time I see it on the web, I put together a quick example:

https://jsfiddle.net/ng7hmuxd

Re: Tw-fade: pure CSS scroll-driven edge masking

#33

Post by nailer »

petekp wrote: post #2

hey all, just released a plugin to scratch an itch. i'd been lazily adding linear gradients on the edges of scrollviews and animating them with JS based on scroll position. turns out you can do a lot better with pure CSS now by leveraging masking + the new CSS scroll animations API. works in pretty much all browers excepting firefox which doesn't have CSS scroll animations yet, but the nightly version does, so it sho…

Doesn't seem to work in Chrome 147.0.7727.137 or Edge 149.0.4022.69.

Clicking the different options and then scrolling horizontally or vertically does not change any behaviour, appearance or animation.

My understanding is that something should change in the occluded elements that are partially outside the scroll area.

Re: Tw-fade: pure CSS scroll-driven edge masking

#35

Post by tosti »

I did this with CSS forever ago. Make an alpha gradient (from background color to transparent), save it as png, add an element to use the background-image on, and use absolute positioning to put it on top. Finish it with pointer-events: none

Why on earth would it be a big deal not to use JS for this. Even a frost effect has been demoed in CSS.

Of course nowadays you don't need the png.

Re: Tw-fade: pure CSS scroll-driven edge masking

#36

Post by arm32 »

dag11 wrote: post #31
chrismorgan wrote: post #13

The fade affects scroll bars, which is quite unpleasant (and arguably catastrophic if you have two-dimensional scrolling). The traditional background-image technique avoided this by sitting inside the scroll area. I don’t think you can achieve that with mask, without an additional element. But I think it might be worth that extra element.

You can achieve that with a background-image, because you can stack multiple gradients. Since this problem bothers me every time I see it on the web, I put together a quick example: https://jsfiddle.net/ng7hmuxd

Now you need to publish an NPM package with this. Or you know what, I'll do it—and take credit—muahah! Agent, steal this guy's code!

Re: Tw-fade: pure CSS scroll-driven edge masking

#37

Post by wuhhh »

I just had need of this, dropped it in - works great. The only slight issue I had is that if there's a tiny amount of overflow, you basically don't get to see the fade because it's designed to disappear as you reach 100% scroll. In practice, that means I've noticed single chars getting lopped off with no visible gradient. I don't think there's much way around this beyond adding a bit of right hand padding to the track
Post reply on HN