A CSS-only colour change for scrolling text (without duplicate text)
So I’ve been playing around with CSS and scrolling lately and this latest demo popped into my mind while driving home. I remember seeing this effect where some text remained stationary in the viewport but changed colour as the user scrolled. I always assumed it required some Javascript wizardry but could it be done with CSS only?
In a word, ”yes”.
I looked around for existing solutions but the ones I found either used Javascript or a duplicate of the text targeted for changing colours. I was pretty confident we could use modern CSS and I was right.
The magic is done by the CSS property backdrop-filter which applies the selected effect(s) to everything behind it, much like Layer Effects in Photoshop. So the idea is to create an element with backdrop-filter
applied to serve as a layer and have the text scroll behind it.
Here’s a video showing it in action:
And of course the Codepen:
See the Pen CSS-only colour-change for scrolling text (without duplicate text) by Joshua (@limshengming) on CodePen.
There are naturally some caveats:
- The “effect layer” will change the background colour of everything it passes over. This may or may not be desired.
- If the width of the “effect layer” increases after page load (e.g. by making the browser wider),
backdrop-filter
will not apply to the newly created space. - Everything under the “effect layer” will be unselectable/unclickable.
Social Media Links