VueCraft NPM

Параллакс-слой ​

useParallaxLayer(target, options) — готовый примитив «слой со своей скоростью скролла»: переводит viewportProgress элемента в CSS-смещение, учитывая prefers-reduced-motion.

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

В отличие от трёх остальных composables, этот — не прямая обёртка над движком ядра: он построен на выходе useElementViewport(), со своей логикой преобразования поверх.

Опции ​

speed ​

number · по умолчанию: — (обязательный параметр)

Относительная скорость: 1 двигается вместе со скроллом, >1 — быстрее, <1 — медленнее, отрицательное значение разворачивает направление.

axis ​

'x' | 'y' · по умолчанию: 'y'

clamp ​

boolean · по умолчанию: false

Ограничить смещение на краях прогресса 0/1 вместо экстраполяции за них.

easing ​

Easing ((t: number) => number) · по умолчанию: —

Применяется к viewportProgress перед преобразованием в смещение в пикселях — см. Утилиты — там готовые пресеты.

range ​

number · по умолчанию: 100

Амплитуда смещения в пикселях при speed: 1.

Возвращаемое значение ​

style ​

ComputedRef<{ transform: string }>

Всегда { transform: 'none' }, когда prefersReducedMotion() вернул true. Иначе: amplitude = range * speed, (опционально сглаженный) прогресс преобразуется из [0, 1] в [amplitude, -amplitude] (с учётом clamp), и результат становится translateY(...) или translateX(...) в зависимости от axis.

progress ​

Ref<number>

Сглаженный viewportProgress (равен самому viewportProgress, если easing не задан) — значение прямо перед тем, как оно превращается в смещение в пикселях, на случай если оно нужно напрямую.

Пример:

vue
<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>