coonlink-luxy 26.1.1

package/README.md

@@ -0,0 +1,36 @@
+# coonlink-luxy
+
+Inertia scroll and parallax (same idea as [luxy.js](https://github.com/min30327/luxy.js)), with fixes for modern browsers, `data-speed-y`, and clean `destroy()` for React/Next.
+
+## Install
+
+```bash
+npm i coonlink-luxy
+```
+
+## Markup
+
+```html
+<div id="luxy">
+  <div class="luxy-el" data-speed-y="5" data-offset="-50">…</div>
+</div>
+```
+
+## Usage
+
+```ts
+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()
+```

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export type CoonlinkLuxyOptions = {
+    wrapper?: string;
+    targets?: string;
+    wrapperSpeed?: number;
+    targetSpeed?: number;
+    targetPercentage?: number;
+    respectReducedMotion?: boolean;
+};
+export interface CoonlinkLuxyInstance {
+    init(options?: CoonlinkLuxyOptions): boolean;
+    destroy(): void;
+}
+declare const defaults: Required<CoonlinkLuxyOptions>;
+export declare function createCoonlinkLuxy(): CoonlinkLuxyInstance;
+export declare function getCoonlinkLuxyDefaults(): Readonly<typeof defaults>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,OAAO,CAAA;IAC5C,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,QAAQ,CAAC,mBAAmB,CAO3C,CAAA;AAqKD,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD;AAED,wBAAgB,uBAAuB,IAAI,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAEnE"}

package/dist/index.js

@@ -0,0 +1,143 @@
+const defaults = {
+    wrapper: '#luxy',
+    targets: '.luxy-el',
+    wrapperSpeed: 0.08,
+    targetSpeed: 0.02,
+    targetPercentage: 0.1,
+    respectReducedMotion: true,
+};
+function extend(base, over) {
+    return { ...base, ...(over ?? {}) };
+}
+function getScrollTop() {
+    return (window.scrollY ??
+        document.documentElement.scrollTop ??
+        document.body.scrollTop ??
+        0);
+}
+function readSpeedY(el) {
+    return el.getAttribute('data-speed-y') ?? el.getAttribute('data-speed-Y');
+}
+class Engine {
+    constructor() {
+        this.settings = defaults;
+        this.wrapper = null;
+        this.targets = [];
+        this.wrapperOffset = 0;
+        this.scrollTop = 0;
+        this.scrollRaf = 0;
+        this.resizeObserver = null;
+        this.onResize = () => {
+            if (!this.wrapper)
+                return;
+            const h = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
+            document.body.style.height = `${h}px`;
+        };
+    }
+    init(options) {
+        this.destroy();
+        this.settings = extend(defaults, options);
+        if (this.settings.respectReducedMotion) {
+            const mq = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+            if (mq?.matches)
+                return false;
+        }
+        const el = document.querySelector(this.settings.wrapper);
+        if (!el || !(el instanceof HTMLElement)) {
+            return false;
+        }
+        this.wrapper = el;
+        const nodeList = document.querySelectorAll(this.settings.targets);
+        const scrollHeight = Math.max(this.wrapper.scrollHeight, this.wrapper.clientHeight);
+        document.body.style.height = `${scrollHeight}px`;
+        this.wrapper.style.width = '100%';
+        this.wrapper.style.position = 'fixed';
+        this.targets = [];
+        for (let i = 0; i < nodeList.length; i++) {
+            const node = nodeList[i];
+            if (!(node instanceof HTMLElement))
+                continue;
+            const offset = node.getAttribute('data-offset');
+            const speedX = node.getAttribute('data-speed-x');
+            const speedY = readSpeedY(node);
+            const percentage = node.getAttribute('data-percentage');
+            const horizontal = node.getAttribute('data-horizontal');
+            this.targets.push({
+                elm: node,
+                offset: offset ? parseInt(offset, 10) || 0 : 0,
+                horizontal: horizontal ? 1 : 0,
+                top: 0,
+                left: 0,
+                speedX: speedX ? Number(speedX) || 1 : 1,
+                speedY: speedY ? Number(speedY) || 1 : 1,
+                percentage: percentage ? parseInt(percentage, 10) || 0 : 0,
+            });
+        }
+        this.resizeObserver = new ResizeObserver(this.onResize);
+        this.resizeObserver.observe(this.wrapper);
+        window.addEventListener('resize', this.onResize);
+        const tickScroll = () => {
+            this.scrollTop = getScrollTop();
+            this.wrapperUpdate();
+            for (let i = 0; i < this.targets.length; i++) {
+                this.targetsUpdate(this.targets[i]);
+            }
+            this.scrollRaf = window.requestAnimationFrame(tickScroll);
+        };
+        this.scrollRaf = window.requestAnimationFrame(tickScroll);
+        return true;
+    }
+    wrapperUpdate() {
+        if (!this.wrapper)
+            return;
+        this.wrapperOffset +=
+            (this.scrollTop - this.wrapperOffset) * this.settings.wrapperSpeed;
+        const y = Math.round(-this.wrapperOffset * 100) / 100;
+        this.wrapper.style.transform = `translate3d(0, ${y}px, 0)`;
+    }
+    targetsUpdate(target) {
+        const ts = this.settings.targetSpeed;
+        const tp = this.settings.targetPercentage;
+        target.top +=
+            (this.scrollTop * Number(ts) * Number(target.speedY) - target.top) * tp;
+        target.left +=
+            (this.scrollTop * Number(ts) * Number(target.speedX) - target.left) * tp;
+        const targetOffsetTop = parseInt(String(target.percentage), 10) -
+            target.top -
+            parseInt(String(target.offset), 10);
+        let offsetY = Math.round(targetOffsetTop * -100) / 100;
+        let offsetX = 0;
+        if (target.horizontal) {
+            const targetOffsetLeft = parseInt(String(target.percentage), 10) -
+                target.left -
+                parseInt(String(target.offset), 10);
+            offsetX = Math.round(targetOffsetLeft * -100) / 100;
+        }
+        target.elm.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0)`;
+    }
+    destroy() {
+        window.removeEventListener('resize', this.onResize);
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        if (this.scrollRaf) {
+            window.cancelAnimationFrame(this.scrollRaf);
+            this.scrollRaf = 0;
+        }
+        document.body.style.height = '';
+        if (this.wrapper) {
+            this.wrapper.removeAttribute('style');
+            this.wrapper = null;
+        }
+        for (let i = 0; i < this.targets.length; i++) {
+            this.targets[i].elm.removeAttribute('style');
+        }
+        this.targets = [];
+        this.wrapperOffset = 0;
+    }
+}
+export function createCoonlinkLuxy() {
+    return new Engine();
+}
+export function getCoonlinkLuxyDefaults() {
+    return { ...defaults };
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "coonlink-luxy",
+  "version": "26.1.1",
+  "description": "Inertia scroll and parallax (luxy-style) with fixes for modern browsers, React/Next, and prefers-reduced-motion.",
+  "homepage": "https://dev.coonlink.com",
+  "keywords": [
+    "parallax",
+    "scroll",
+    "inertia",
+    "smooth",
+    "luxy"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}