useParallax

Demo

roll: .nan
tilt: .nan
source: mouse

Credit of images to Jarom Vogel

Usage

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>

Type Declarations

export interface UseParallaxOptions extends ConfigurableWindow {
  deviceOrientationTiltAdjust
?: (i
: number) => number
  deviceOrientationRollAdjust
?: (i
: number) => number
  mouseTiltAdjust
?: (i
: number) => number
  mouseRollAdjust
?: (i
: number) => number
}
export interface UseParallaxReturn {
  /**
   * Roll value. Scaled to `-0.5 ~ 0.5`
   */
  roll
: ComputedRef
<number>
  /**
   * Tilt value. Scaled to `-0.5 ~ 0.5`
   */
  tilt
: ComputedRef
<number>
  /**
   * Sensor source, can be `mouse` or `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