diff --git a/inc/css/main.css b/inc/css/main.css index 6eb314e..4fe8071 100644 --- a/inc/css/main.css +++ b/inc/css/main.css @@ -303,6 +303,26 @@ nav { margin-left: calc(var(--h-info) * 0.25 * -0.70); } +#avatar:hover { + cursor: pointer; +} + +.wobble { + animation: wob 1s infinite; +} + +@keyframes wob { + 0% { + transform: scale(1.0) rotate(0deg); + } + 50% { + transform: scale(0.8); + } + 100% { + transform: scale(1.0) rotate(360deg); + } +} + .flying-text { display: inline-block; position: absolute; diff --git a/inc/js/main.js b/inc/js/main.js index b0fc3e9..dce7eeb 100644 --- a/inc/js/main.js +++ b/inc/js/main.js @@ -30,6 +30,11 @@ function initialize() { runTextAnimation = true; flyingText(welcome); hideElement(overlay); + } else if (curr.id === "avatar") { + curr.classList.add("wobble"); + for (let i = 0; i < 10; ++i) + shootText(welcome, 3, "♥"); + setTimeout(() => {curr.classList.remove("wobble");}, 2000); } }); diff --git a/inc/js/text.js b/inc/js/text.js index 854671e..1cddf73 100644 --- a/inc/js/text.js +++ b/inc/js/text.js @@ -1,15 +1,24 @@ /* -* text.js -* function for the purpose of my portfolio to animate welcome text -* Author: phga/teord -* Date: 2019-10-23 -* Version: 1.0 -*/ + * 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 = ["Keyboard-Nerd", "🖤", "Emacs", + let statements = sta || ["Keyboard-Nerd", "🖤", "Emacs", "Lives in VI", "GNU/Linux", "Arch Linux", "Computer Science", "Design", "Javascript", "C/C++", "Go", "Bash", @@ -28,43 +37,36 @@ async function flyingText(canvas) { "Winter is coming!", "😺 Person"]; let stCount = statements.length; - let animationTime = 4; + let animationTime = sec; let maxX , maxY, x, y; + // Browser resize + maxX = canvas.offsetWidth / 2; + maxY = canvas.offsetHeight / 2; - 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`; - 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); - // 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; - // 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); - canvas.appendChild(curr); + // 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 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); - } + // wait to remove it (async) + setTimeout(() => { + curr.remove(); + }, animationTime * 1000 + 2000); } function getRand(max, min) {