❯
fn

useParallax

v0.0.14testeddemo

Reactive parallax effect. Prefers the device orientation sensors and transparently falls back to mouse position when orientation is unavailable. Composes useDeviceOrientation and 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

ts
const { roll, tilt, source } = useParallax(el);
// <div :style="{ transform: `rotateX(${roll * 20}deg) rotateY(${tilt * 20}deg)` }" />
ts
// Viewport-relative, with custom sensitivity on the mouse fallback
const { roll, tilt } = useParallax(null, { mouseTiltAdjust: i => i * 2 });

Demo

Loading demo…

Signature

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

Parameters

ParameterTypeDescription
target?MaybeComputedElementRef | nullElement the mouse fallback is measured against. Omit to use the viewport.
options?UseParallaxOptionsOptions

Returns

UseParallaxReturnReactive roll, tilt (both -0.5 ~ 0.5), and source
PropertyTypeDescription
rollComputedRef<number>Roll, scaled to -0.5 ~ 0.5 (rotation around the horizontal axis).
tiltComputedRef<number>Tilt, scaled to -0.5 ~ 0.5 (rotation around the vertical axis).
sourceComputedRef<ParallaxSource>The input the effect is currently reading from.