VueCraft NPM

Утилиты ​

Небольшие самостоятельные помощники, которые используются внутри движков выше, и экспортируются для повторного использования в своих эффектах.

Перевод значения между диапазонами ​

mapRange() — линейно переводит значение из одного диапазона в другой.

ts
function mapRange(
  value: number,
  from: [number, number],
  to: [number, number],
  clampResult?: boolean,
): number

Параметры ​

value ​

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

Значение для преобразования, выраженное в диапазоне from.

from ​

[number, number] · по умолчанию: —

Входной диапазон, в котором сейчас выражено value.

to ​

[number, number] · по умолчанию: —

Выходной диапазон, в который нужно преобразовать значение.

clampResult ​

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

При true держит результат в пределах to на краях, вместо экстраполяции за них — корректно обрабатывает и перевёрнутый диапазон to (например, [100, -100]).

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

number — преобразованное значение.

Пример:

ts
import { mapRange } from '@macrulez/inview-core'

mapRange(0.5, [0, 1], [0, 200]) // 100
mapRange(1.2, [0, 1], [0, 200], true) // 200 (ограничено)

Привязка к CSS-переменной ​

bindCSSVar() — записывает числовое значение прогресса в CSS custom property на элементе, чтобы результирующий визуальный эффект можно было собрать на чистом CSS.

ts
function bindCSSVar(element: HTMLElement, name: string, value: number | string): void

Параметры ​

element ​

HTMLElement · по умолчанию: —

name ​

string · по умолчанию: —

Имя custom property. Если name ещё не начинается с --, префикс добавляется автоматически.

value ​

number | string · по умолчанию: —

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

void

Пример:

ts
import { bindCSSVar } from '@macrulez/inview-core'

bindCSSVar(el, 'progress', 0.42) // el.style.setProperty('--progress', '0.42')
css
.card {
  opacity: var(--progress);
}

Предпочтение сниженной анимации ​

prefersReducedMotion() — читает медиа-запрос prefers-reduced-motion.

ts
function prefersReducedMotion(): boolean

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

boolean — false, если window/matchMedia недоступны (SSR), иначе window.matchMedia('(prefers-reduced-motion: reduce)').matches.

Ограничение значения ​

clamp() — ограничивает значение диапазоном [min, max].

ts
function clamp(value: number, min: number, max: number): number

Параметры ​

value ​

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

min ​

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

max ​

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

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

number — value, ограниченное диапазоном [min, max].

Пресеты плавности ​

easings — набор пресетов плавности, применяемых к значению прогресса 0..1 перед тем, как передать его в эффект (смещение параллакса, CSS-переменную и т. д.).

ts
type Easing = (t: number) => number

const easings: Record<EasingName, Easing>
type EasingName = keyof typeof easings

Имена пресетов: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInSine, easeOutSine, easeInOutSine.

Пример:

ts
import { easings } from '@macrulez/inview-core'

const eased = easings.easeOutCubic(0.5)