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

View File

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

View File

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