august
/
augustkline.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved jitter on lower-res displays

This commit is contained in:
august kline 2024-08-27 13:38:08 -04:00
parent 93985054f7
commit 3bae312ec4
3 changed files with 52 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -11,7 +11,7 @@
<body>
<div id="app">
<div class="text">
<div class="info">
<h1>hi! i'm august. or kline. </h1>
<p>i like to build systems. lately i've been working on
<a href="https://git.augustkline.com/august/george" target="_blank" rel="noreferer">george</a>.

70
src/main.ts
View File

@ -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();

31
style.css
View File

@ -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;
}
}