Revealing ‘back to top’ button
Such a clever minimalist use of CSS!
Parallax scrolling with CSS variables | basicScroll
Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)
Related links
Sticky CSS Grid Items | Melanie Richards
This is a useful technique that future me is almost certainly going to need at some point.
Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks
I didn’t know about scroll-margin-top! I wonder if you could apply a universal rule …like, say you’ve got a fixed header that’s 2em in height, couldn’t you declare:
:target {
scroll-margin-top: 2em;
}
Lazy Loading Images and Video | Web Fundamentals | Google Developers
Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.
russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.
This looks like a handy JavaScript library for scroll-based events. But “scrollytelling?” No. Just …no.
Related posts
Continuous partial annoyance
It’s not you, Twitter, it’s me.
The datalist element on iOS 26
Once again, Safari has fucked up its implementation.
Underlines and line height
How to make the distance of link underlines proportional to the line height of the text.
Style your underlines
Make your links beautiful and accessible.
CSS snippets
Some styles I re-use when I’m programming with CSS.