useParallax

v0.0.15testeddemo

Reactive parallax effect. Prefers the device orientation sensors and transparently falls back to mouse position when orientation is unavailable. Composes {@link useDeviceOrientation} and {@link useMouse}; pass a `target` to make the mouse fallback relative to an element's centre instead of the whole viewport. SSR-safe.

Source Tests

Examples

const { roll, tilt, source } = useParallax(el);
// <div :style="{ transform: `rotateX(${roll * 20}deg) rotateY(${tilt * 20}deg)` }" />

// Viewport-relative, with custom sensitivity on the mouse fallback
const { roll, tilt } = useParallax(null, { mouseTiltAdjust: i => i * 2 });

Demo

Loading demo…

Signature

export function useParallax(
  target?: MaybeComputedElementRef | null,
  options: UseParallaxOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`?	`any`	—	Element the mouse fallback is measured against. Omit to use the viewport.
`options`?	`UseParallaxOptions`	`{}`	Options

Returns

UseParallaxReturnReactive `roll`, `tilt` (both `-0.5 ~ 0.5`), and `source`