Birbla

Join the discussion

Write your take first — we'll ask for email only when you're ready to publish.

Sign in
  • Hacker News
  • Might want to set `overscroll-behavior: contain;` on those scroll areas, having the whole page move up and down (or worse, navigating Back when scrolling left) isn't great UX.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

    by franky47
  • 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!
    by maxjustus
  • 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
    by wuhhh
  • FYI 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.

    by jstanley
  • This is extremely laggy on my computer. It may not be a top-end gaming supercomputer but it's no slouch either.
    by Hugsbox
  • 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 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.

    by petekp
  • 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.
    by chrismorgan
  • What's edge masking and what am I looking at? I clicked through several of the options and I don't see any difference. There just seems to be a really basic gradient shadow.

    I have gpu enabled in google chrome (verified by visiting chrome://gpu) on Chrome/149.0.7827.155 on Linux.

    by porphyra

Explore Birbla archives