diff --git a/src/main.ts b/src/main.ts index 8554705..2e95167 100644 --- a/src/main.ts +++ b/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); }); -document.addEventListener("mousemove", onMove); + +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(); diff --git a/style.css b/style.css index 91f5289..1894d61 100644 --- a/style.css +++ b/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; } }