Added image random walk

This commit is contained in:
august kline 2024-08-27 01:28:18 -04:00
parent 903a27679d
commit 6f222a917c
2 changed files with 34 additions and 19 deletions

View File

@ -145,6 +145,10 @@ let setImages = () => {
const img = document.createElement("img"); const img = document.createElement("img");
img.setAttribute("src", images[index]); img.setAttribute("src", images[index]);
img.setAttribute("alt", alts[index]); img.setAttribute("alt", alts[index]);
let seedX = Math.random() * Math.random() * 100;
let seedY = Math.random() * Math.random() * 100;
img.setAttribute("seedX", seedX.toString());
img.setAttribute("seedY", seedY.toString());
const left = lefts[index]; const left = lefts[index];
const top = tops[index]; const top = tops[index];
const z = (Math.abs(left) + Math.abs(top)) / 2; const z = (Math.abs(left) + Math.abs(top)) / 2;
@ -155,14 +159,42 @@ let setImages = () => {
); );
img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`); img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`);
img.style.setProperty("--translate-z", `${z * 3000}px`); img.style.setProperty("--translate-z", `${z * 3000}px`);
img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`);
background.append(img); background.append(img);
} }
}; };
const moveImages = (t: number) => {
const noise = (t: number) => {
return Math.sin(2 * t) + Math.sin(Math.PI * t);
};
const toDomPrecision = (v: number) => {
return Math.round(v * 1e4) / 1e4;
};
const images = document.body.getElementsByTagName("img");
for (let i = 0; i < images.length; i++) {
const img = images[i];
let top = toDomPrecision(
Number(img.style.top.slice(0, img.style.top.length - 2)),
);
let left = toDomPrecision(
Number(img.style.left.slice(0, img.style.left.length - 2)),
);
top += noise(Number(img.getAttribute("seedY")) + t) * 0.1;
left += noise(Number(img.getAttribute("seedX")) + t) * 0.1;
img.style.setProperty("top", `${top}px`);
img.style.setProperty("left", `${left}px`);
}
t += 0.001;
window.requestAnimationFrame(moveImages.bind(this, t));
};
window.addEventListener("load", () => { window.addEventListener("load", () => {
background.setAttribute("loaded", ""); background.setAttribute("loaded", "");
console.log(background); if (!prefersReducedMotion) {
moveImages(0);
}
}); });
const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches; const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches;

View File

@ -97,26 +97,9 @@ img {
} }
} }
@keyframes gentlemove {
0% {
transform: rotateX(-4deg)
}
100% {
transform: rotateX(4deg)
}
}
@media (hover: none) and (pointer: coarse) {
#background {
animation: 30s gentlemove infinite alternate ease-in-out;
}
}
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
#background { #background {
transform: none; transform: none;
animation: none;
} }
a { a {