slowed down the whole animation industry
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m30s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m30s
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -15,20 +15,19 @@ const itemEls = ref<HTMLDivElement[]>([]);
|
||||
|
||||
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<Item[]>(
|
||||
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,
|
||||
})),
|
||||
|
||||
Reference in New Issue
Block a user