Sensor

Monitors an element and adds a class to it when its bounding box overlaps with the viewport, i.e. when it comes into view. This is useful for scroll animations:

<p>Vivamus eu volutpat enim. Proin …</p>
<p>Integer ligula eros, mattis ac …</p>
<p>Sed eget imperdiet nulla. Vestibulum …</p>

<section>
	<div ob-sensor>A</div>
	<div ob-sensor>B</div>
	<div ob-sensor>C</div>
</section>

<p ob-sensor>Nam sed dignissim quam. Sed porta orci …</p>
<p ob-sensor>Quisque non nibh ullamcorper, rhoncus …</p>

[ob-sensor] {
	transition: all 0.6s ease;
}

[ob-sensor]:not(.is-active) {
	opacity: 0;
	transform: translateY(20px);
	transition: none;
}

section div:nth-child(2) { transition-delay: 0.15s }
section div:nth-child(3) { transition-delay: 0.3s }

import { Watcher } from 'oblik'
import { Sensor } from 'oblik/components/sensor'

let w = new Watcher(document.body, {
	components: {
		sensor: Sensor
	}
})

w.init()

# Options

# class

Added when the element overlaps the container.

Default: is-active

# offset

Added to the element's position, allowing you to make it appear earlier or later.

Default: 0

# container

What the element's bounding box is compared to. Can be a parent HTMLElement or the window (viewport).

Default: window

# edge

Element's bounding box edge that is used to perform the calculation. Either top, right, bottom, or left.

Default: top

# containerEdge

Container's bounding box edge that is used to perform the calculation. Either top, right, bottom, or left.

Default: bottom

← Scrolled Sharer →