Skip to content

Files

Latest commit

 

History

History
26 lines (24 loc) · 740 Bytes

63.md

File metadata and controls

26 lines (24 loc) · 740 Bytes
title date submitter tags discussion
I want a CSS pseudo-selector for elements that are in the viewport
2019-08-22 22:14:26 UTC
Nick Gard
css

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);
}