Intersection Observer API
Checking compatibility...
Efficiently detect element visibility and implement infinite scrolling, lazy loading, and scroll-based animations with the Intersection Observer API.
Create Observer
Set up a visibility detector that efficiently tracks when elements appear on screen. This example shows how to create an observer that automatically runs your code when elements enter or exit the viewport, without complicated scroll calculations.
=
=
=
=
=
=
Output
Click Run to see output...Threshold
Control exactly when your code runs based on how much of an element is visible. This example demonstrates how to trigger actions at specific visibility percentages, like running animations when an element is 25%, 50%, or 75% in view.
=
=
=
=
=
=
Output
Click Run to see output...