⚠️ Warning: this is an old article and may include information that’s out of date. ⚠️
(2016: in retrospect, this is kind of gratuitous and doesn’t appear to be fully working anymore…)
Just for fun, I wanted to reproduce a cool but completely superfluous UI I saw in the updated Foursquare app recently. Basically, when the user tries to scroll past the upper bound of the app/page, the header image becomes blurred.
We can do the same thing on the web by listening for negative scroll and then using (abusing?) CSS filters.
Video
Extra tweaks for mobile
Note that there’s an extra trick for iOS, which presents problems I had forgotten about (namely, no negative scroll, and a scroll listener which fires once at the end of scrolling). That’s why I had to throw in some extra logic for touchstart/touchmove/touchend.
Comments