⬅️ Back to Table of Contents

📄 useParallax

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	9
🟢 Vue Composition API	5
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useParallax/index.ts

📦 Imports

Name	Source
ComputedRef	vue
ConfigurableWindow	../_configurable
MaybeElementRef	../unrefElement
computed	vue
reactive	vue
defaultWindow	../_configurable
useDeviceOrientation	../useDeviceOrientation
useMouseInElement	../useMouseInElement
useScreenOrientation	../useScreenOrientation

---

Vue Composition API

Name	Type	Reactive Variables	Composables
reactive	reactive	none	none
reactive	reactive	none	none
computed	computed	none	none
computed	computed	none	none
computed	computed	none	none

---

Functions

useParallax(target: MaybeElementRef, options: UseParallaxOptions): UseParallaxReturn

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

Parameters:

• target any: No description
• options any: No description

Raw JSDoc

/**
 * Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse`
 * if orientation is not supported.
 *
 * @param target
 * @param options
 */

Calls:

• reactive (from vue)
• useDeviceOrientation (from ../useDeviceOrientation)
• useScreenOrientation (from ../useScreenOrientation)
• useMouseInElement (from ../useMouseInElement)
• computed (from vue)
• deviceOrientationRollAdjust
• mouseRollAdjust
• deviceOrientationTiltAdjust
• mouseTiltAdjust

Code

export function useParallax(
  target: MaybeElementRef,
  options: UseParallaxOptions = {},
): UseParallaxReturn {
  const {
    deviceOrientationTiltAdjust = i => i,
    deviceOrientationRollAdjust = i => i,
    mouseTiltAdjust = i => i,
    mouseRollAdjust = i => i,
    window = defaultWindow,
  } = options

  const orientation = reactive(useDeviceOrientation({ window }))
  const screenOrientation = reactive(useScreenOrientation({ window }))
  const {
    elementX: x,
    elementY: y,
    elementWidth: width,
    elementHeight: height,
  } = useMouseInElement(target, { handleOutside: false, window })

  const source = computed(() => {
    if (orientation.isSupported
      && ((orientation.alpha != null && orientation.alpha !== 0) || (orientation.gamma != null && orientation.gamma !== 0))) {
      return 'deviceOrientation'
    }
    return 'mouse'
  })

  const roll = computed(() => {
    if (source.value === 'deviceOrientation') {
      let value: number
      switch (screenOrientation.orientation) {
        case 'landscape-primary':
          value = orientation.gamma! / 90
          break
        case 'landscape-secondary':
          value = -orientation.gamma! / 90
          break
        case 'portrait-primary':
          value = -orientation.beta! / 90
          break
        case 'portrait-secondary':
          value = orientation.beta! / 90
          break
        default:
          value = -orientation.beta! / 90
      }
      return deviceOrientationRollAdjust(value)
    }
    else {
      const value = -(y.value - height.value / 2) / height.value
      return mouseRollAdjust(value)
    }
  })

  const tilt = computed(() => {
    if (source.value === 'deviceOrientation') {
      let value: number
      switch (screenOrientation.orientation) {
        case 'landscape-primary':
          value = orientation.beta! / 90
          break
        case 'landscape-secondary':
          value = -orientation.beta! / 90
          break
        case 'portrait-primary':
          value = orientation.gamma! / 90
          break
        case 'portrait-secondary':
          value = -orientation.gamma! / 90
          break
        default:
          value = orientation.gamma! / 90
      }
      return deviceOrientationTiltAdjust(value)
    }
    else {
      const value = (x.value - width.value / 2) / width.value
      return mouseTiltAdjust(value)
    }
  })

  return { roll, tilt, source }
}

---

Interfaces

UseParallaxOptions

Interface Code

export interface UseParallaxOptions extends ConfigurableWindow {
  deviceOrientationTiltAdjust?: (i: number) => number
  deviceOrientationRollAdjust?: (i: number) => number
  mouseTiltAdjust?: (i: number) => number
  mouseRollAdjust?: (i: number) => number
}

Properties

Name	Type	Optional	Description
deviceOrientationTiltAdjust	(i: number) => number	✓	not shown
deviceOrientationRollAdjust	(i: number) => number	✓	not shown
mouseTiltAdjust	(i: number) => number	✓	not shown
mouseRollAdjust	(i: number) => number	✓	not shown

UseParallaxReturn

Interface Code

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'>
}

Properties

Name	Type	Optional	Description
roll	ComputedRef<number>	✗	not shown
tilt	ComputedRef<number>	✗	not shown
source	ComputedRef<'deviceOrientation' \| 'mouse'>	✗	not shown

---

Generated by Syntax Scribe