VueCraft NPM

Позиция элемента во viewport ​

useElementViewport(target) — реактивная позиция элемента относительно viewport: его прямоугольник, viewportProgress и distanceFromCenter, обновляется на общем цикле requestAnimationFrame.

ts
function useElementViewport(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
): UseElementViewportReturn

Тонкая реактивная обёртка над createElementTracker() — что именно означает каждое поле и как оно вычисляется, смотрите на этой странице.

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

rect ​

Ref<DOMRectLike>

Значение по умолчанию (до разрешения target, или при SSR): { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }.

viewportProgress ​

Ref<number>

0..1, от появления элемента у нижнего края viewport до ухода за верхний край.

distanceFromCenter ​

Ref<number>

Пример:

vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useElementViewport } from '@macrulez/inview-vue'

const section = ref<HTMLElement | null>(null)
const { viewportProgress } = useElementViewport(section)
const opacity = computed(() => Math.min(1, viewportProgress.value * 2))
</script>

<template>
  <section ref="section" :style="{ opacity }">...</section>
</template>

За готовым параллакс-эффектом на основе этих же данных — смотрите Параллакс-слой.