Add bouncing auto-scroll animation to stamps section
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 16s

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-25 21:24:40 +00:00
parent 4e7377d9f0
commit b2042ffe78

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref } from "vue";
import { ref, onMounted, onUnmounted } from "vue";
import Touchscreen from "@/components/util/Touchscreen.vue";
import Link from "@/components/text/Link.vue";
@@ -19,10 +19,42 @@ let srcs = [
"/img/stamps/demo.gif",
];
shuffleArray(srcs);
const touchscreen = ref(null);
let animId = null;
let dx = 0.5;
let dy = 0.3;
function bounce() {
const el = touchscreen.value?.$el;
if (!el) return;
const maxX = el.scrollWidth - el.clientWidth;
const maxY = el.scrollHeight - el.clientHeight;
if (maxX > 0) {
el.scrollLeft += dx;
if (el.scrollLeft <= 0 || el.scrollLeft >= maxX) dx = -dx;
}
if (maxY > 0) {
el.scrollTop += dy;
if (el.scrollTop <= 0 || el.scrollTop >= maxY) dy = -dy;
}
animId = requestAnimationFrame(bounce);
}
onMounted(() => {
animId = requestAnimationFrame(bounce);
});
onUnmounted(() => {
if (animId) cancelAnimationFrame(animId);
});
</script>
<template>
<Touchscreen>
<Touchscreen ref="touchscreen">
<div class="flex flex-wrap tst">
<Link bare href="https://www.adam-french.co.uk">
<img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />