phga.de-legacy/web/static/js/text.js

/*
 * 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));
}