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

Mobile animation

This commit is contained in:
august kline 2024-08-26 20:52:53 -04:00
parent 9312aff918
commit 440c018df6
2 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/main.ts
View File

@ -19,16 +19,16 @@ import sashaklinecar from "/sashaklinecar.jpg";
import solderkitty from "/solderkitty.jpg"; import solderkitty from "/solderkitty.jpg";
import sunsetkline from "/sunsetkline.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)", "(prefers-reduced-motion: reduce)",
); ).matches;
let setImages = () => { let setImages = () => {
let images: string[] = []; let images: string[] = [];
let alts: string[] = []; let alts: string[] = [];
if (prefersReducedMotion.matches) { if (prefersReducedMotion) {
images = [ images = [
backwalkgeorge, backwalkgeorge,
fieldnotes, fieldnotes,
@ -140,16 +140,15 @@ let setImages = () => {
const lefts = randNums(images.length, 0.05); const lefts = randNums(images.length, 0.05);
const tops = randNums(images.length, 0.05); const tops = randNums(images.length, 0.05);
for (let index in images) { for (let index in images) {
let img = document.createElement("img"); const img = document.createElement("img");
img.setAttribute("src", images[index]); img.setAttribute("src", images[index]);
img.setAttribute("alt", alts[index]); img.setAttribute("alt", alts[index]);
// let left = randn_bm(); const left = lefts[index];
// let top = randn_bm(); const top = tops[index];
let left = lefts[index]; const z = (Math.abs(left) + Math.abs(top)) / 2;
let top = tops[index]; const range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
let z = (Math.abs(left) + Math.abs(top)) / 2;
let range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
img.style.setProperty( img.style.setProperty(
"left", "left",
`${left * range.x + window.innerWidth / 2}px`, `${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", () => { window.addEventListener("load", () => {
background.setAttribute("loaded", ""); background.setAttribute("loaded", "");
console.log(background); 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(); setImages();

18
style.css
View File

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