useParallax

类别

Sensors

导出体积

2.41 kB

上次更改

8 months ago

轻松创建视差效果。它使用 useDeviceOrientation，如果不支持方向，则回退到 useMouse。

示例

源码 playground (beta)

roll: .nan
tilt: .nan
source: mouse

图片来源： Jarom Vogel

使用方法

vue

<script setup>
import { useParallax } from '@vueuse/core'

const container = ref(null)
const { tilt, roll, source } = useParallax(container)
</script>

<template>
  <div ref="container" />
</template>

类型声明

typescript

export interface UseParallaxOptions extends ConfigurableWindow {
  deviceOrientationTiltAdjust?: (i: number) => number
  deviceOrientationRollAdjust?: (i: number) => number
  mouseTiltAdjust?: (i: number) => number
  mouseRollAdjust?: (i: number) => number
}
export interface UseParallaxReturn {
  /**
   * 滚动值。缩放至 `-0.5 ~ 0.5`
   */
  roll: ComputedRef<number>
  /**
   * 倾斜值。缩放至 `-0.5 ~ 0.5`
   */
  tilt: ComputedRef<number>
  /**
   * 传感器来源，可以是 `mouse` 或 `deviceOrientation`
   */
  source: ComputedRef<"deviceOrientation" | "mouse">
}
/**
 * Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse`
 * if orientation is not supported.
 *
 * @param target
 * @param options
 */
export declare function useParallax(
  target: MaybeElementRef,
  options?: UseParallaxOptions,
): UseParallaxReturn