Added image random walk

src/main.ts

@@ -145,6 +145,10 @@ let setImages = () => {
     const img = document.createElement("img");
     img.setAttribute("src", images[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 top = tops[index];
     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("--translate-z", `${z * 3000}px`);
-    img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`);
     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", () => {
   background.setAttribute("loaded", "");
-  console.log(background);
+  if (!prefersReducedMotion) {
+    moveImages(0);
+  }
 });
 
 const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches;

style.css

@@ -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) {
     #background {
         transform: none;
-        animation: none;
     }
 
     a {