Composables
useElementParallax
Individual element parallax composable via template ref — returns elementRef to bind to a single element.
useElementParallax
Applies a scroll-driven translateY parallax effect to a single element via a template ref. Unlike useParallax which targets all .xParallax elements in the document, this composable gives you precise control over one specific element using Vue's ref binding.
Usage
const { elementRef } = useElementParallax(0.3)
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
speed | number | 0.5 | Parallax speed multiplier. 0.3 = moves at 30% of scroll speed. Negative values reverse direction. |
Returns
| Key | Type | Description |
|---|---|---|
elementRef | Ref<HTMLElement | null> | Template ref to bind to the target element. The RAF loop applies translateY to this element on scroll. |
Example
<script setup>
const { elementRef } = useElementParallax(0.3)
</script>
<template>
<section class="relative overflow-hidden">
<img
ref="elementRef"
src="/hero-bg.jpg"
alt="Parallax background"
class="absolute inset-0 w-full h-full object-cover"
/>
<div class="relative z-10">
<slot />
</div>
</section>
</template>
AI Context
composable: useElementParallax
package: "@xenterprises/nuxt-x-marketing"
use-when: >
Applying a parallax scroll effect to a single specific element (e.g., a hero
background image, a decorative shape) using a Vue template ref. Preferred over
useParallax when you need component-level control and do not want to apply
data-parallax-speed globally. Returns elementRef — bind it with ref="elementRef"
on the target element.