diff --git a/src/main.ts b/src/main.ts index 2e95167..19eab81 100644 --- a/src/main.ts +++ b/src/main.ts @@ -145,6 +145,10 @@ let setImages = () => { const img = document.createElement("img"); img.setAttribute("src", images[index]); img.setAttribute("alt", alts[index]); + let seedX = Math.random() * Math.random() * 100; + let seedY = Math.random() * Math.random() * 100; + img.setAttribute("seedX", seedX.toString()); + img.setAttribute("seedY", seedY.toString()); const left = lefts[index]; const top = tops[index]; const z = (Math.abs(left) + Math.abs(top)) / 2; @@ -155,14 +159,42 @@ let setImages = () => { ); img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`); img.style.setProperty("--translate-z", `${z * 3000}px`); - img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`); background.append(img); } }; +const moveImages = (t: number) => { + const noise = (t: number) => { + return Math.sin(2 * t) + Math.sin(Math.PI * t); + }; + + const toDomPrecision = (v: 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)); +}; + window.addEventListener("load", () => { background.setAttribute("loaded", ""); - console.log(background); + if (!prefersReducedMotion) { + moveImages(0); + } }); const mobile = window.matchMedia("(hover: none) and (pointer: coarse)").matches; diff --git a/style.css b/style.css index d591697..c536af9 100644 --- a/style.css +++ b/style.css @@ -97,26 +97,9 @@ img { } } -@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; - } -} - @media (prefers-reduced-motion: reduce) { #background { transform: none; - animation: none; } a {