Add bouncing auto-scroll animation to stamps section
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 16s
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:
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
|
|
||||||
import Touchscreen from "@/components/util/Touchscreen.vue";
|
import Touchscreen from "@/components/util/Touchscreen.vue";
|
||||||
import Link from "@/components/text/Link.vue";
|
import Link from "@/components/text/Link.vue";
|
||||||
@@ -19,10 +19,42 @@ let srcs = [
|
|||||||
"/img/stamps/demo.gif",
|
"/img/stamps/demo.gif",
|
||||||
];
|
];
|
||||||
shuffleArray(srcs);
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Touchscreen>
|
<Touchscreen ref="touchscreen">
|
||||||
<div class="flex flex-wrap tst">
|
<div class="flex flex-wrap tst">
|
||||||
<Link bare href="https://www.adam-french.co.uk">
|
<Link bare href="https://www.adam-french.co.uk">
|
||||||
<img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
|
<img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
|
||||||
|
|||||||
Reference in New Issue
Block a user