IntersectionObserver: Playing hide and seek

In the old days, if you wanted to know if the user had scrolled down to some element, you either needed to calculate or add some “mouse over” listener. The first one was expensive, and the second is ugly. With IntersectionObserver you can do it the proper way.

IntersectionObserver is a listener that fires every time the object is visible to the user. And you can define the ratio of visibility to track. This comes in use whenever you want to “lazy load” an element, or track visibility.

In the following simple example, there are 50 black elements inside the dive, but you will never see them colored black. Because the more visible they are, the bigger there opacity.

Defining the opacity according to the visibility threshold creates a nice texture that comes to life once the element scrolls.