Parallax

Compares the bounding client rect of an element to that of another element or the window and then applies CSS variables to allow styling.

<section ob-parallax>
	<div class="target">Target</div>
</section>

[ob-parallax] .target {
	transform: translateY(calc(var(--parallax) * 80%));
}

import { Watcher } from 'oblik'
import { Parallax } from 'oblik/components/parallax'

let w = new Watcher(document.body, {
	components: {
		parallax: Parallax
	}
})

w.init()

Note: IE11 does not support CSS variables. Extend the apply() method and use the parallax value to set inline styles instead.

# Options

# var

Name for the CSS variable.

Default: parallax

# axis

Use horizontal x of vertical y scroll.

Default: y

# clamp

Whether the value can't go beyond the [-1, 1] range.

Default: true

# reference

The element's rectangle position is compared to this object's rectangle. Can be either an HTMLElement or window. The scroll event listener is attached to this.

Default: window