Skip to content

useParallax

类别
导出体积
2.41 kB
上次更改
10 months ago

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

示例

roll: .nan
tilt: .nan
source: mouse
图片来源: Jarom Vogel

使用方法

vue
<script setup lang="ts">
import { 
useParallax
} from '@vueuse/core'
const
container
=
ref
(null)
const {
tilt
,
roll
,
source
} =
useParallax
(
container
)
</script> <template> <
div
ref
="
container
" />
</template>

类型声明

ts
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

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Antério Vieira
Anthony Fu
SerKo
Robin
James Garbutt
IlyaL
Robin
huiliangShen
Jelf
wheat

更新日志

0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
3fd94 - feat: can work with different screen orientation (#3675)