Composables
useParallax
requestAnimationFrame parallax effect for .xParallax[data-parallax-speed] elements.
useParallax
Attaches a requestAnimationFrame scroll listener that applies a CSS translateY transform to every .xParallax[data-parallax-speed] element in the document. The speed multiplier is read from each element's data-parallax-speed attribute. Called automatically by the marketing.client.ts plugin — use directly for fine-grained control.
Usage
// Called automatically by the global plugin on mount.
// Call directly when you need manual control:
useParallax()
// With custom options:
useParallax({ maxOffset: 100 })
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
options | { maxOffset?: number } | {} | maxOffset — maximum pixel offset clamped on each element. |
Returns
This composable returns void. It registers the RAF loop as a side effect and cancels it on unmount.
| Effect | Description |
|---|---|
Watches .xParallax[data-parallax-speed] | All matching elements get a translateY applied on scroll. |
Reads data-parallax-speed | Per-element speed multiplier (e.g. 0.3 = 30% of scroll position). |
| RAF loop | Uses requestAnimationFrame for smooth, jank-free animation. |
| Cleanup | The RAF loop is cancelled automatically when the component unmounts. |
Example
<script setup>
// Re-initialize after dynamically adding parallax elements
useParallax({ maxOffset: 80 })
</script>
<template>
<div class="xParallax" data-parallax-speed="0.3">
<img src="/hero-bg.jpg" alt="Background" />
</div>
</template>
AI Context
composable: useParallax
package: "@xenterprises/nuxt-x-marketing"
use-when: >
Applying scroll-driven depth effects to background images or decorative
elements. The plugin initializes this automatically — only call directly
for re-initialization or custom maxOffset. For single-element parallax
controlled via a template ref, use useElementParallax instead.
Requires .xParallax class and data-parallax-speed attribute on target elements.