I also love the pure CSS parallax effect of the "tw-fade" title shadow using multiple spans with different styles that fade in and out based on scroll position. Very clever!
Tw-fade: pure CSS scroll-driven edge masking
11–20 of 37 posts
Re: Tw-fade: pure CSS scroll-driven edge masking
#12This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
It might be related to the liquid glass imitation in the color scheme picker
Re: Tw-fade: pure CSS scroll-driven edge masking
#13The 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.
Re: Tw-fade: pure CSS scroll-driven edge masking
#14arrow keys don't work, pgdown doesn't work
I don't think that would be an issue of this CSS, that's just normal `overflow: auto` behaviour.
Re: Tw-fade: pure CSS scroll-driven edge masking
#15Neat! I'd much rather just copy-paste the CSS from the site though, would never install something like this as a package.
Might be useful: https://untested.sonnet.io/notes/natural-gradients-in-css/
Re: Tw-fade: pure CSS scroll-driven edge masking
#16This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
It might be related to the liquid glass imitation in the color scheme picker
I think you're right. Performance profile shows lots of long spans relating to that element, and deleting that element makes the page scroll much more smoothly.
There are still other issues though. The performance of this page feels pretty bad in general.
Re: Tw-fade: pure CSS scroll-driven edge masking
#17What is happening here and why is it special? The site itself does show, but does not tell (which in itself is somewhat refreshing).
Re: Tw-fade: pure CSS scroll-driven edge masking
#18This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
[deleted]
Re: Tw-fade: pure CSS scroll-driven edge masking
#19This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
It's fine on my phone, Brave Android. Maybe it doesn't work on Firefox?
Re: Tw-fade: pure CSS scroll-driven edge masking
#20How it works: https://github.com/petekp/tw-fade#how-it-works