I want a CSS pseudo-selector for elements that are in the viewport

Submitted by Nick Gard

The kind of effects this can help with are currently done with an IntersectionObserver, but it would be nice if style changes could stay in CSS. Maybe a :in-viewport (and :seen) selector. A use case would be animating titles onto the page when the user scrolls down to it:

h2 {
opacity: 0;
transform: translateX(-50%);
transition: opacity transform;
}
h2:in-viewport {
opacity: 1;
transform: translateX(0);
}
h2.stay-visible-after-animating:seen {
opacity: 1;
transform: translateX(0);
}
Do you want this too? Share it!
Votes
3
Vote by sharing on Twitter
What are votes for and how are they tallied?
Tagged
CSS