1---
2category: Sensors
3---
4 
5# useParallax
6 
7Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse` if orientation is not supported.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useParallax } from '@vueuse/core'
14 
15const container = ref(null)
16const { tilt, roll, source } = useParallax(container)
17</script>
18 
19<template>
20  <div ref="container" />
21</template>
22```
23 
24## Type Declarations
25 
26```ts
27export interface UseParallaxOptions extends ConfigurableWindow {
28  deviceOrientationTiltAdjust?: (i: number) => number
29  deviceOrientationRollAdjust?: (i: number) => number
30  mouseTiltAdjust?: (i: number) => number
31  mouseRollAdjust?: (i: number) => number
32}
33export interface UseParallaxReturn {
34  /**
35   * Roll value. Scaled to `-0.5 ~ 0.5`
36   */
37  roll: ComputedRef<number>
38  /**
39   * Tilt value. Scaled to `-0.5 ~ 0.5`
40   */
41  tilt: ComputedRef<number>
42  /**
43   * Sensor source, can be `mouse` or `deviceOrientation`
44   */
45  source: ComputedRef<"deviceOrientation" | "mouse">
46}
47/**
48 * Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse`
49 * if orientation is not supported.
50 *
51 * @param target
52 * @param options
53 */
54export declare function useParallax(
55  target: MaybeElementRef,
56  options?: UseParallaxOptions,
57): UseParallaxReturn
58```
59