From 3bae312ec4f4a9ad5312870705dbc6d544992ea2 Mon Sep 17 00:00:00 2001 From: august kline Date: Tue, 27 Aug 2024 13:38:08 -0400 Subject: [PATCH] Improved jitter on lower-res displays --- index.html | 2 +- src/main.ts | 70 +++++++++++++++++++++++++++-------------------------- style.css | 31 ++++++++++++------------ 3 files changed, 52 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 3558aa1..1dd06d5 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-
+

hi! i'm august. or kline.

i like to build systems. lately i've been working on george. diff --git a/src/main.ts b/src/main.ts index 24053d1..d81c8d3 100644 --- a/src/main.ts +++ b/src/main.ts @@ -25,7 +25,7 @@ const prefersReducedMotion = window.matchMedia( "(prefers-reduced-motion: reduce)", ).matches; -let setImages = () => { +const setImages = () => { let images: string[] = []; let alts: string[] = []; if (prefersReducedMotion) { @@ -165,7 +165,22 @@ let setImages = () => { } }; -const moveImages = (t: number) => { +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.003}deg`; + const rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.003}deg`; + root.style.setProperty("--rotate-x", rotateX); + root.style.setProperty("--rotate-y", rotateY); + }; + document.addEventListener("mousemove", onMove); +} + +window.addEventListener("load", () => { + background.setAttribute("loaded", ""); + const noise = (t: number) => { return Math.sin(2 * t) + Math.sin(Math.PI * t); }; @@ -174,42 +189,29 @@ const moveImages = (t: 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)); -}; + const dpi = window.devicePixelRatio; + const moveImages = (t: number) => { + 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.4) / dpi; // move faster on lower-res displays to improve jitter + left += (noise(Number(img.getAttribute("seedX")) + t) * 0.4) / dpi; + img.style.setProperty("top", `${top}px`); + img.style.setProperty("left", `${left}px`); + } + t += 0.0005; + window.requestAnimationFrame(moveImages.bind(this, t)); + }; -window.addEventListener("load", () => { - background.setAttribute("loaded", ""); if (!prefersReducedMotion) { moveImages(0); } }); -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 bbb04dc..1e23f11 100644 --- a/style.css +++ b/style.css @@ -63,7 +63,6 @@ a { a:hover { text-shadow: 0rem 0.2rem 1rem var(--link-shadow-color); - /* transform: rotate(-3deg); */ transform: translateY(-7%) scale(1.01); } @@ -95,21 +94,7 @@ img { } } -@media (prefers-reduced-motion: reduce) { - #background { - transform: none; - } - - a { - transition: none; - } - - a:hover { - transform: none; - } -} - -.text { +.info { display: flex; flex-direction: column; align-items: center; @@ -127,3 +112,17 @@ img { -0.05rem 0.05rem 0px var(--text-border-shadow-color), 0rem 0rem 2rem var(--text-shadow-color); } + +@media (prefers-reduced-motion: reduce) { + #background { + transform: none; + } + + a { + transition: none; + } + + a:hover { + transform: none; + } +}