phga/phga.de-legacy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: Added some new words to fly past the screen

Browse Source
This commit is contained in:
phga 2022-11-30 00:22:10 +01:00
parent fc4d41cf73
commit 0bb88dee7b
Signed by: phga
GPG Key ID: 5249548AA705F019
1 changed files with 98 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
web/static/js/text.js
View File

@ -8,73 +8,119 @@
// set a global var "run" to true before running this function
"use strict";
async function flyingText(canvas) {
canvas.classList.remove("hidden");
canvas.classList.remove("hidden");
while (runTextAnimation) {
// wait till ele is rdy in dom + time between spawns
await shootText(canvas, 4);
}
while (runTextAnimation) {
// wait till ele is rdy in dom + time between spawns
await shootText(canvas, 4);
}
}
async function shootText(canvas, sec, sta) {
// TODO: move to argument, load from backend
let statements = sta || ["Keyboard-Nerd", "🖤", "Emacs",
"Lives in VI", "GNU/Linux", "Arch Linux",
"Computer Science", "Design",
"Javascript", "C/C++", "Go", "Bash",
"Java", "Python", "QMK", "Vector Graphics",
"Adobe Collection", "OP-1", "Synthesizer",
"6y Work Experience", "Network Security",
"CCNA", "Cisco", "Firewalling", "Project MGMT",
"IT Specialist", "Git", "FreeBSD", "Photography",
"Emacs-Lisp", "Sophos Firewall",
"Microsoft Server", "Appgate", "Palo Alto FW",
"Linux Server", "FreeNAS", "Hardware",
"Arduino", "Electronics", "Soldering",
"Full Stack Networking", "Hotline-Manager",
"Trainer for IT-Specialists", "Matlab/Octave",
"PHP", "CSS", "HTML", "Privacy Advocate",
"Winter is coming!", "😺 Person", "Blender",
"Prusa Slicer", "3D-Printing", "Bachelor of Science"];
// TODO: move to argument, load from backend
let statements = sta || [
"Keyboard-Nerd",
"🖤",
"Emacs",
"Lives in VI",
"GNU/Linux",
"Arch Linux",
"Computer Science",
"Design",
"Javascript",
"C/C++",
"Go",
"Bash",
"Java",
"Python",
"QMK",
"Vector Graphics",
"Adobe Collection",
"OP-1",
"Synthesizer",
"8y Work Experience",
"Network Security",
"CCNA",
"Cisco",
"Firewalling",
"Project MGMT",
"IT Specialist",
"Git",
"FreeBSD",
"Photography",
"Emacs-Lisp",
"Sophos Firewall",
"Microsoft Server",
"Appgate",
"Palo Alto FW",
"Linux Server",
"FreeNAS",
"Hardware",
"Arduino",
"Electronics",
"Soldering",
"Full Stack Networking",
"Hotline-Manager",
"Trainer for IT-Specialists",
"Matlab/Octave",
"PHP",
"CSS",
"HTML",
"Privacy Advocate",
"Winter is coming!",
"😺 Person",
"Blender",
"Prusa Slicer",
"3D-Printing",
"Bachelor of Science",
"NixOS",
"Rust",
"ReactJS",
"SolidJS",
"Teacher",
"Typescript",
"Snappy Keyboard",
"Shanty-Themes",
];
let stCount = statements.length;
let animationTime = sec;
let maxX , maxY, x, y;
// Browser resize
maxX = canvas.offsetWidth / 2;
maxY = canvas.offsetHeight / 2;
let stCount = statements.length;
let animationTime = sec;
let maxX, maxY, x, y;
// Browser resize
maxX = canvas.offsetWidth / 2;
maxY = canvas.offsetHeight / 2;
let curr = document.createElement("p");
curr.innerHTML = statements[getRand(stCount)];
curr.className = "flying-text";
curr.style.transition = `${animationTime}s ease-in`;
let curr = document.createElement("p");
curr.innerHTML = statements[getRand(stCount)];
curr.className = "flying-text";
curr.style.transition = `${animationTime}s ease-in`;
// Get random position + correction to not touch middle to much
x = getRand(maxX * 0.2, maxX);
y = getRand(maxY * 0.45, maxY);
// Get random position + correction to not touch middle to much
x = getRand(maxX * 0.2, maxX);
y = getRand(maxY * 0.45, maxY);
// Random direction and correction to not touch right border
x = (getRand(2) == 1) ? -1*x : 0.3 * x;
y = (getRand(2) == 1) ? -1*y : 0.8 * y;
// Random direction and correction to not touch right border
x = getRand(2) == 1 ? -1 * x : 0.3 * x;
y = getRand(2) == 1 ? -1 * y : 0.8 * y;
canvas.appendChild(curr);
await sleep(1000);
canvas.appendChild(curr);
await sleep(1000);
// add the stuff that should be animated (transition in class)
curr.style.transform = `translate(${x}px, ${y}px)`;
curr.style.fontSize = `${Math.random() + Math.random() + 1.0}vw`;
// add the stuff that should be animated (transition in class)
curr.style.transform = `translate(${x}px, ${y}px)`;
curr.style.fontSize = `${Math.random() + Math.random() + 1.0}vw`;
// wait to remove it (async)
setTimeout(() => {
curr.remove();
}, animationTime * 1000 + 2000);
// wait to remove it (async)
setTimeout(() => {
curr.remove();
}, animationTime * 1000 + 2000);
}
function getRand(max, min) {
min = min || 0;
return min + Math.floor(Math.random() * (max - min));
min = min || 0;
return min + Math.floor(Math.random() * (max - min));
}
function sleep(ms) {
return new Promise((nil) => setTimeout(nil, ms));
return new Promise((nil) => setTimeout(nil, ms));
}