Parallax Layer

useParallaxLayer(target, options) — a ready-made "layer with its own scroll speed" primitive: maps the element's viewportProgress into a CSS transform offset, honoring prefers-reduced-motion.

function useParallaxLayer(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options: UseParallaxLayerOptions,
): UseParallaxLayerReturn

Unlike the other three composables, this one isn't a direct wrapper around a core engine — it's built on useElementViewport()'s output, with its own mapping logic layered on top.

Options

speed

number · default: — (required)

Relative speed: 1 moves with scroll, >1 faster, <1 slower, a negative value reverses direction.

axis

'x' | 'y' · default: 'y'

clamp

boolean · default: false

Clamp the offset at the 0/1 progress edges instead of extrapolating past them.

easing

Easing ((t: number) => number) · default: —

Applied to viewportProgress before it's mapped to a pixel offset — see Utilities for the built-in presets.

range

number · default: 100

Pixel offset amplitude at speed: 1.

Return value

style

ComputedRef<{ transform: string }>

Always { transform: 'none' } when prefersReducedMotion() is true. Otherwise: amplitude = range * speed, the (optionally eased) progress is mapped from [0, 1] into [amplitude, -amplitude] (respecting clamp), and the result becomes translateY(...) or translateX(...) depending on axis.

progress

Ref<number>

The eased viewportProgress (equal to viewportProgress itself when no easing is given) — the value right before it gets mapped to a pixel offset, in case you need it directly.

Example:

<script setup lang="ts">
import { ref } from 'vue'
import { useParallaxLayer } from '@macrulez/inview-vue'
import { easings } from '@macrulez/inview-core'

const layer = ref<HTMLElement | null>(null)
const { style } = useParallaxLayer(layer, {
  speed: 0.5,
  easing: easings.easeOutCubic,
  clamp: true,
})
</script>

<template>
  <div ref="layer" :style="style">...</div>
</template>