Intersection

Import Intersection from @waaark/luge, register it with luge.addPlugin('intersection', Intersection), then call luge.init(). See Getting started for a complete setup.

Toggle classes when elements get in or out the viewport.

The plugin uses ViewportObserver, with intersection.threshold defaulting to 0.3. The class state follows the native entry’s isIntersecting value; the threshold controls observer notifications, not a strict “30% visible” class rule.

Usage

<div class="my-element" data-lg-intersection></div>
<div class="my-element" data-lg-intersection data-lg-intersection-class="my-global-class"></div>

When an element gets in or out it gets .is-in, .is-out, .is-out-top, .is-out-bottom CSS classes. The value of the data-lg-intersection-class attribute is also toggled on the html element (e.g. to change the page’s background when a section is reached).

Attributes

Try it

Open the full demo