coonlink-luxy

Inertia scroll and parallax (same idea as luxy.js), with fixes for modern browsers, data-speed-y, and clean destroy() for React/Next.

Install

npm i coonlink-luxy

Markup

<div id="luxy">
  <div class="luxy-el" data-speed-y="5" data-offset="-50">…</div>
</div>

#luxy gets a CSS transform while scrolling. Any child with position: fixed would be positioned against that transformed box, not the browser viewport — so pin overlays (modals, toasts, QR widgets) with a React portal to document.body (or keep them outside #luxy).

Usage

import { createCoonlinkLuxy } from 'coonlink-luxy'

const luxy = createCoonlinkLuxy()
luxy.init({
  wrapper: '#luxy',
  targets: '.luxy-el',
  wrapperSpeed: 0.08,
  targetSpeed: 0.02,
  targetPercentage: 0.1,
  respectReducedMotion: true,
})

// SPA / React unmount:
luxy.destroy()