arimelody.me/public/script/main.js

import "./header.js";
import "./config.js";

function type_out(e) {
    const text = e.innerText;
    const original = e.innerHTML;
    const delay = 25;
    let chars = 0;

    function insert_char(character, parent) {
        if (chars == 0) parent.innerHTML = "";
        const c = document.createElement("span");
        c.innerText = character;
        parent.appendChild(c);
        c.classList.add("newchar");
    }

    function normalize() {
        e.innerHTML = original;
    }

    function increment_char() {
        const newchar = text.substring(chars, chars + 1);
        insert_char(newchar, e);
        chars++;
        if (chars <= text.length) {
            setTimeout(increment_char, delay);
        } else {
            setTimeout(normalize, 250);
        }
    }

    increment_char();
}

function fill_list(list) {
    const items = list.querySelectorAll("li a, li span");
    items.innerText = "";
    const delay = 100;

    items.forEach((item, iter) => {
        item.style.animationDelay = `${iter * delay}ms`;
        item.style.animationPlayState = "playing";
    });
}

document.addEventListener("DOMContentLoaded", () => {
    [...document.querySelectorAll(".typeout")]
        .filter((e) => e.innerText != "")
        .forEach((e) => {
            type_out(e);
            console.log(e);
        });
    [...document.querySelectorAll("ol, ul")]
        .filter((e) => e.innerText != "")
        .forEach((e) => {
            fill_list(e);
        });

    const top_button = document.getElementById("backtotop");
    window.onscroll = () => {
        if (!top_button) return;
        const btt_threshold = 100;
        if (
            document.body.scrollTop > btt_threshold ||
            document.documentElement.scrollTop > btt_threshold
        ) {
            top_button.classList.add("active");
        } else {
            top_button.classList.remove("active");
        }
    }
});