adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Adam French
2026-03-25 21:26:48 +00:00
parent b2042ffe78
commit 8f57c15c24
1 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
vue/src/views/home/Stamps.vue
View File

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