Mobile animation

src/main.ts

@@ -19,16 +19,16 @@ import sashaklinecar from "/sashaklinecar.jpg";
 import solderkitty from "/solderkitty.jpg";
 import sunsetkline from "/sunsetkline.jpg";
 
-let background = document.getElementById("background")!;
+const background = document.getElementById("background")!;
 
-let prefersReducedMotion = window.matchMedia(
+const prefersReducedMotion = window.matchMedia(
   "(prefers-reduced-motion: reduce)",
-);
+).matches;
 
 let setImages = () => {
   let images: string[] = [];
   let alts: string[] = [];
-  if (prefersReducedMotion.matches) {
+  if (prefersReducedMotion) {
     images = [
       backwalkgeorge,
       fieldnotes,
@@ -140,16 +140,15 @@ let setImages = () => {
 
   const lefts = randNums(images.length, 0.05);
   const tops = randNums(images.length, 0.05);
+
   for (let index in images) {
-    let img = document.createElement("img");
+    const img = document.createElement("img");
     img.setAttribute("src", images[index]);
     img.setAttribute("alt", alts[index]);
-    // let left = randn_bm();
-    // let top = randn_bm();
-    let left = lefts[index];
-    let top = tops[index];
-    let z = (Math.abs(left) + Math.abs(top)) / 2;
-    let range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
+    const left = lefts[index];
+    const top = tops[index];
+    const z = (Math.abs(left) + Math.abs(top)) / 2;
+    const range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
     img.style.setProperty(
       "left",
       `${left * range.x + window.innerWidth / 2}px`,
@@ -161,19 +160,22 @@ let setImages = () => {
   }
 };
 
-const root = document.documentElement;
-
-const onMove = (ev: MouseEvent) => {
-  let rotateY = `${-(ev.clientX - window.innerWidth / 2) * 0.005}deg`;
-  let rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.005}deg`;
-  root.style.setProperty("--rotate-x", rotateX);
-  root.style.setProperty("--rotate-y", rotateY);
-};
-
 window.addEventListener("load", () => {
   background.setAttribute("loaded", "");
   console.log(background);
 });
+
+const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+
+if (!mobile) {
+  const root = document.documentElement;
+  const onMove = (ev: MouseEvent) => {
+    const rotateY = `${-(ev.clientX - window.innerWidth / 2) * 0.005}deg`;
+    const rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.005}deg`;
+    root.style.setProperty("--rotate-x", rotateX);
+    root.style.setProperty("--rotate-y", rotateY);
+  };
   document.addEventListener("mousemove", onMove);
+}
 
 setImages();

style.css

@@ -93,7 +93,23 @@ img {
     position: absolute;
 
     &[loaded] img {
-        opacity: 1 !important;
+        opacity: 1;
+    }
+}
+
+@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;
     }
 }