See the Pen
“Mix-Blend-Mode Scroll Interaction by Charles (@ChazTF)
on CodePen.
I recently stumbled on https://screenpilotxignite.com/ and was immediately hooked by how their header elements magically blend and invert as you scroll. It’s such a clever way to keep text and icons from disappearing into busy backgrounds. I’ve dabbled with mix-blend-mode before, but only on static elements, this dynamic effect was an eye opener that I had to try.
At first, I toyed with a purely CSS approach, but ran into issues: changing link colors and SVG fills meant they’d vanish against the page background. That’s when I decided to add a simple “scrolled” class on the header and toggle my styles there. Voilà… Magic!