/* * 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 "use strict"; async function flyingText(canvas) { canvas.classList.remove("hidden"); 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"]; 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`; // 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); 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)); }