1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00

Animate username

This commit is contained in:
K4USTU3H 2019-12-13 22:23:05 +05:30
parent 85835e6167
commit 9dd8f0ff82
No known key found for this signature in database
GPG key ID: 00B12ABC9EE9D58D
3 changed files with 70 additions and 4 deletions

View file

@ -124,10 +124,14 @@ body {
margin: 1.5vh 0px; margin: 1.5vh 0px;
} }
.hidden {
opacity: 0;
}
#username { #username {
font-size: 18px;
font-weight: bold;
font-family: "Asap Condensed", sans-serif; font-family: "Asap Condensed", sans-serif;
font-size: 18px;
color: white;
} }
#username span { #username span {
@ -135,6 +139,13 @@ body {
font-family: "Asap Condensed", sans-serif; font-family: "Asap Condensed", sans-serif;
} }
.console-underscore {
display: inline-block;
position: relative;
top: -0.14em;
left: 10px;
}
#userbio { #userbio {
font-size: 26px; font-size: 26px;
font-family: "Asap", sans-serif; font-family: "Asap", sans-serif;

View file

@ -69,6 +69,59 @@
magicProjectsGrid.listen(); magicProjectsGrid.listen();
magicForksGrid.listen(); magicForksGrid.listen();
}); });
// function([string1, string2],target id,[color1,color2])
consoleText(["K4USTU3H", "Just another code copy-paster."], "text", [
"white",
"white"
]);
function consoleText(words, id, colors) {
if (colors === undefined) colors = ["#fff"];
var visible = true;
var con = document.getElementById("console");
var letterCount = 1;
var x = 1;
var waiting = false;
var target = document.getElementById(id);
target.setAttribute("style", "color:" + colors[0]);
window.setInterval(function() {
if (letterCount === 0 && waiting === false) {
waiting = true;
target.innerHTML = words[0].substring(0, letterCount);
window.setTimeout(function() {
var usedColor = colors.shift();
colors.push(usedColor);
var usedWord = words.shift();
words.push(usedWord);
x = 1;
target.setAttribute("style", "color:" + colors[0]);
letterCount += x;
waiting = false;
}, 1000);
} else if (letterCount === words[0].length + 1 && waiting === false) {
waiting = true;
window.setTimeout(function() {
x = -1;
letterCount += x;
waiting = false;
}, 1000);
} else if (waiting === false) {
target.innerHTML = words[0].substring(0, letterCount);
letterCount += x;
}
}, 120);
window.setInterval(function() {
if (visible === true) {
con.className = "console-underscore hidden";
visible = false;
} else {
con.className = "console-underscore";
visible = true;
}
}, 400);
}
</script> </script>
</body> </body>
</html> </html>

View file

@ -112,9 +112,11 @@ module.exports.updateHTML = (username, opts) => {
<meta name="twitter:description" content="${user.bio}" />`; <meta name="twitter:description" content="${user.bio}" />`;
document.getElementById( document.getElementById(
"username" "username"
).innerHTML = `<span style="display:${ ).innerHTML = `<span id="text" style="display:${
user.name == null || !user.name ? "none" : "block" user.name == null || !user.name ? "none" : "block"
};">${user.name}</span><a href="${user.html_url}">@${user.login}</a>`; };"></span><div class='console-underscore' id='console'>&#95;</div><br><a href="${
user.html_url
}">@${user.login}</a>`;
//document.getElementById("github_link").href = `https://github.com/${user.login}`; //document.getElementById("github_link").href = `https://github.com/${user.login}`;
document.getElementById("userbio").innerHTML = convertToEmoji( document.getElementById("userbio").innerHTML = convertToEmoji(
user.bio user.bio