stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useParallax.md

category

category
Sensors

useParallax

Create parallax effect easily. It uses useDeviceOrientation and fallback to useMouse if orientation is not supported.

Usage

<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;