From b087172bb18d8bf61293f62d972e900e9205de9e Mon Sep 17 00:00:00 2001 From: Adam French Date: Tue, 24 Feb 2026 22:31:54 +0000 Subject: [PATCH] slowed down the whole animation industry --- nginx/vue/src/components/util/AutoScroll.vue | 23 +++++++++++++++----- nginx/vue/src/views/home/Intro2.vue | 11 +++++----- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/nginx/vue/src/components/util/AutoScroll.vue b/nginx/vue/src/components/util/AutoScroll.vue index 548448f..f319340 100644 --- a/nginx/vue/src/components/util/AutoScroll.vue +++ b/nginx/vue/src/components/util/AutoScroll.vue @@ -9,9 +9,10 @@ import { useTemplateRef, onMounted, onBeforeUnmount } from "vue"; const container = useTemplateRef("container"); -const SPEED = 1; // px per frame +const SPEED = 0.0005; // % per frame const PAUSE = 2000; // ms at top/bottom +let pos = 0; let direction = 1; // 1 = down, -1 = up let timeoutId; let timeoutId2; @@ -27,17 +28,27 @@ function handleHover() { function tick() { const el = container.value; - el.scrollTop += SPEED * direction; - const reachedBottom = el.scrollTop + el.clientHeight >= el.scrollHeight; - const reachedTop = el.scrollTop <= 0; + const reachedBottom = pos <= 0; + const reachedTop = pos >= 1; + console.log("speed"); - if (reachedBottom || reachedTop) { - direction *= -1; + if (reachedBottom) { + pos = 0.001; + direction = 1; + handleHover(); + return; + } else if (reachedTop) { + pos = 0.999; + direction = -1; handleHover(); return; } + pos += direction * SPEED; + + el.scrollTop = pos * el.scrollHeight; + timeoutId = requestAnimationFrame(tick); } diff --git a/nginx/vue/src/views/home/Intro2.vue b/nginx/vue/src/views/home/Intro2.vue index 79ff28f..735ad51 100644 --- a/nginx/vue/src/views/home/Intro2.vue +++ b/nginx/vue/src/views/home/Intro2.vue @@ -15,20 +15,19 @@ const itemEls = ref([]); const phrases = [ "Welcome to my website", - "Eddy is a top G", - "Thank you for visiting", + "I'm looking to do a big revamp", + "A4 sheets of paper are what I'm used to", "I'd love to know your recommendations", - "Message me on discord or steam", + "for very short books", + "Message me by any means necessary", "I like anime, all kinds of music and sci fic", - "I'm sorry the animations are so fast", - "Someday I'll slow it down >_< ", ]; const items = ref( phrases.map((text, i) => ({ x: i * 20, y: i * 20, - dx: rand(0, 100) / 100, + dx: rand(0, 30) / 100, dy: 0.5, content: text, })),