phga/phga.de-legacy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added heart spray on click as a gimmick

Browse Source
This commit is contained in:
Toerd@480 2019-10-25 00:56:42 +02:00
parent 5925e572e3
commit 7ee0ebe302
3 changed files with 64 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
inc/css/main.css
View File

@ -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;

5
inc/js/main.js
View File

@ -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);
}
});

76
inc/js/text.js
View File

@ -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");
let curr = document.createElement("p");
curr.innerHTML = statements[getRand(stCount)];
curr.className = "flying-text";
curr.style.transition = `${animationTime}s ease-in`;
while (runTextAnimation) {
// Browser resize
maxX = canvas.offsetWidth / 2;
maxY = canvas.offsetHeight / 2;
// Get random position + correction to not touch middle to much
x = getRand(maxX * 0.2, maxX);
y = getRand(maxY * 0.45, maxY);
let curr = document.createElement("p");
curr.innerHTML = statements[getRand(stCount)];
curr.className = "flying-text";
curr.style.transition = `${animationTime}s ease-in`;
// 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;
// Get random position + correction to not touch middle to much
x = getRand(maxX * 0.2, maxX);
y = getRand(maxY * 0.45, maxY);
canvas.appendChild(curr);
await sleep(1000);
// 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;
// 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`;
canvas.appendChild(curr);
// 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) {