Tw-fade: pure CSS scroll-driven edge masking
pete.design - 38 poäng - 13 kommentarer - 270656 sekunder sedan
Kommentarer (8)
- chrismorgan - 3756 sekunder sedanThe 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.
- Hugsbox - 6343 sekunder sedanThis is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
- maxjustus - 4053 sekunder sedanI 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!
- petekp - 270656 sekunder sedanhey 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 should be generally available soon.
demo site: https://pete.design/tw-fade
github: https://github.com/petekp/tw-fade
npmjs: https://www.npmjs.com/package/tw-fade
if you use it i'd love to hear how it goes and if you have any feedback.
- jstanley - 7983 sekunder sedanFYI scrolling this page is slow as balls on my computer. Firefox on Ubuntu.
I don't know if this page is a demonstration of your plugin, I'm guessing yes but I can't see any masking going on, it seems to scroll just like a normal page but much more laggy.
EDIT: Oh I see in your comment now, it doesn't work in Firefox. My mistake.
- ptak - 5275 sekunder sedanNeat! I'd much rather just copy-paste the CSS from the site though, would never install something like this as a package.
- f8ght - 5174 sekunder sedan[dead]
- NooneAtAll3 - 6846 sekunder sedanarrow keys don't work, pgdown doesn't work
Nördnytt! 🤓