Improve stamps bounce animation with explicit position tracking
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 14s

Use dedicated posX/posY variables instead of reading scroll position
directly, preventing drift at boundaries. Add more demo stamps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-25 21:26:48 +00:00
parent b2042ffe78
commit 8f57c15c24

View File

@@ -17,11 +17,16 @@ let srcs = [
"/img/stamps/tetris.gif", "/img/stamps/tetris.gif",
"/img/stamps/tf2.gif", "/img/stamps/tf2.gif",
"/img/stamps/demo.gif", "/img/stamps/demo.gif",
"/img/stamps/demo.gif",
"/img/stamps/demo.gif",
"/img/stamps/demo.gif",
]; ];
shuffleArray(srcs); shuffleArray(srcs);
const touchscreen = ref(null); const touchscreen = ref(null);
let animId = null; let animId = null;
let posX = 0;
let posY = 0;
let dx = 0.5; let dx = 0.5;
let dy = 0.3; let dy = 0.3;
@@ -33,12 +38,26 @@ function bounce() {
const maxY = el.scrollHeight - el.clientHeight; const maxY = el.scrollHeight - el.clientHeight;
if (maxX > 0) { if (maxX > 0) {
el.scrollLeft += dx; posX += dx;
if (el.scrollLeft <= 0 || el.scrollLeft >= maxX) dx = -dx; if (posX <= 0) {
posX = 0;
dx = -dx;
} else if (posX >= maxX) {
posX = maxX;
dx = -dx;
}
el.scrollLeft = posX;
} }
if (maxY > 0) { if (maxY > 0) {
el.scrollTop += dy; posY += dy;
if (el.scrollTop <= 0 || el.scrollTop >= maxY) dy = -dy; if (posY <= 0) {
posY = 0;
dy = -dy;
} else if (posY >= maxY) {
posY = maxY;
dy = -dy;
}
el.scrollTop = posY;
} }
animId = requestAnimationFrame(bounce); animId = requestAnimationFrame(bounce);