import imagesLoaded from "https://esm.sh/imagesloaded";
console.clear();
// -------------------------------------------------
// ------------------ Utilities --------------------
// -------------------------------------------------
// Math utilities
const wrap = (n, max) => (n + max) % max;
const lerp = (a, b, t) => a + (b - a) * t;
// DOM utilities
const isHTMLElement = (el) => el instanceof HTMLElement;
const genId = (() => {
let count = 0;
return () => {
return (count++).toString();
};
})();
class Raf {
constructor() {
this.rafId = 0;
this.raf = this.raf.bind(this);
this.callbacks = [];
this.start();
}
start() {
this.raf();
}
stop() {
cancelAnimationFrame(this.rafId);
}
raf() {
this.callbacks.forEach(({ callback, id }) => callback({ id }));
this.rafId = requestAnimationFrame(this.raf);
}
add(callback, id) {
this.callbacks.push({ callback, id: id || genId() });
}
remove(id) {
this.callbacks = this.callbacks.filter((callback) => callback.id !== id);
}
}
class Vec2 {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
set(x, y) {
this.x = x;
this.y = y;
}
lerp(v, t) {
this.x = lerp(this.x, v.x, t);
this.y = lerp(this.y, v.y, t);
}
}
const vec2 = (x = 0, y = 0) => new Vec2(x, y);
export function tilt(node, options) {
let { trigger, target } = resolveOptions(node, options);
let lerpAmount = 0.06;
const rotDeg = { current: vec2(), target: vec2() };
const bgPos = { current: vec2(), target: vec2() };
const update = (newOptions) => {
destroy();
({ trigger, target } = resolveOptions(node, newOptions));
init();
};
let rafId;
function ticker({ id }) {
rafId = id;
rotDeg.current.lerp(rotDeg.target, lerpAmount);
bgPos.current.lerp(bgPos.target, lerpAmount);
for (const el of target) {
el.style.setProperty("--rotX", rotDeg.current.y.toFixed(2) + "deg");
el.style.setProperty("--rotY", rotDeg.current.x.toFixed(2) + "deg");
el.style.setProperty("--bgPosX", bgPos.current.x.toFixed(2) + "%");
el.style.setProperty("--bgPosY", bgPos.current.y.toFixed(2) + "%");
}
}
.
.
.
