You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.7 KiB
77 lines
2.7 KiB
/*
|
|
* text.js
|
|
* function for the purpose of my portfolio to animate welcome text
|
|
* Author: phga/teord
|
|
* Date: 2019-10-23
|
|
* Version: 1.0
|
|
*/
|
|
// set a global var "run" to true before running this function
|
|
async function flyingText(canvas) {
|
|
// TODO: move to argument, load from backend
|
|
let statements = ["Keyboard-Nerd", "🖤", "Emacs",
|
|
"Thinks 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"];
|
|
|
|
let stCount = statements.length;
|
|
let animationTime = 4;
|
|
let maxX , maxY, x, y;
|
|
|
|
canvas.classList.remove("hidden");
|
|
|
|
while (runTextAnimation) {
|
|
// 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`;
|
|
|
|
// 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;
|
|
|
|
canvas.appendChild(curr);
|
|
|
|
// wait till ele is rdy in dom + time between spawns
|
|
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`;
|
|
|
|
// 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));
|
|
}
|
|
|
|
function sleep(ms) {
|
|
return new Promise((nil) => setTimeout(nil, ms));
|
|
}
|