Working animation (flying text) + logo
This commit is contained in:
Toerd@480
parent
17fb0124df
commit
0f67592257
119
inc/css/main.css
119
inc/css/main.css
@ -4,21 +4,25 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--c1: #030303;
|
||||
--c2: #EEF5F7;
|
||||
--c3: #1E473A;
|
||||
--c4: #8FA441;
|
||||
--c5: #E98017;
|
||||
--c6: #E1BC23;
|
||||
--c1: #fefefe;
|
||||
--c2: #0e0e0e;
|
||||
--c3: #d2b2ec;
|
||||
--c4: #eeaeca;
|
||||
--c5: #e9bd94;
|
||||
|
||||
--h-header: 8vh; /* + 2 * 2.5vh margin (12.5)*/
|
||||
--h-info: 67.5vh; /* 100 - 32.5 */
|
||||
--h-ex: 15vh; /* + 2 * 2.5vh bottom (20.0)*/
|
||||
|
||||
--h-ex-thumb: 14.5vh;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: var(--c1);
|
||||
color: var(--c2);
|
||||
font-family: hkg, sans-serif;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@ -29,34 +33,46 @@ html, body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
background: radial-gradient(ellipse, var(--c3) 0%, var(--c4) 63%, var(--c5) 100%);
|
||||
}
|
||||
|
||||
header, #bg-box, #exhibition, .flying-text {
|
||||
border-radius: 0.8vh;
|
||||
}
|
||||
|
||||
/******************* HEADER *******************/
|
||||
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
margin: 2.5vh 0;
|
||||
height: var(--h-header);
|
||||
font-size: 1.5vmax;
|
||||
width: 60%;
|
||||
margin: 2.5vh auto;
|
||||
text-align: center;
|
||||
background-color: var(--c1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
/* font-size: 1.5em; */
|
||||
margin-right: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
nav a:last-child {
|
||||
margin-right: 0;
|
||||
min-width: 16%;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--c5);
|
||||
color: var(--c3);
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
height: 90%;
|
||||
width: calc(var(--h-header) + 3vh);
|
||||
margin-top: -1.5vh;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
@ -64,7 +80,6 @@ a:hover {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
|
||||
/******************* EXHIBITION *******************/
|
||||
|
||||
/* Remove scrollbar in all browsers */
|
||||
@ -79,22 +94,25 @@ a:hover {
|
||||
|
||||
background-color: var(--c1);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: -20vh;
|
||||
width: 20vh;
|
||||
height: 100vw;
|
||||
/* because of the transform width and height are switched */
|
||||
width: var(--h-ex);
|
||||
height: 95vw;
|
||||
left: 97.5vw;
|
||||
bottom: 2.5vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
height: 19.5vh;
|
||||
margin-top: 10vh;
|
||||
height: var(--h-ex-thumb);
|
||||
margin-top: calc(var(--h-ex-thumb) * 0.53);
|
||||
/* keep the ~ratio of a photo
|
||||
(spacing should be the same all the time) */
|
||||
width: calc(19.5vh*1.49);
|
||||
width: calc(var(--h-ex-thumb) * 1.49);
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(90deg) translateX(-30vh);
|
||||
/* shift the thumbs 1*width to the left */
|
||||
transform: rotate(90deg) translateX(calc(var(--h-ex-thumb) * -1.49));
|
||||
}
|
||||
|
||||
.thumb-box:last-child {
|
||||
@ -117,17 +135,17 @@ a:hover {
|
||||
/******************* INFO *******************/
|
||||
|
||||
#info-box {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 65vh;
|
||||
width: 100%;
|
||||
padding-bottom: 2.5vh;
|
||||
height: var(--h-info);
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#bg-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--c1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#info-box table {
|
||||
@ -146,7 +164,6 @@ a:hover {
|
||||
|
||||
#info-box table * {
|
||||
font-size: 1.35vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#info-box th {
|
||||
@ -162,14 +179,14 @@ a:hover {
|
||||
line-height: 2.0vw;
|
||||
font-size: 4.5vw;
|
||||
position: absolute;
|
||||
right: 2vw;
|
||||
right: 1.6vw;
|
||||
top: 1.6vw;
|
||||
color: var(--c2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#btn-close:hover {
|
||||
opacity: 0.7;
|
||||
color: var(--c3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -188,3 +205,33 @@ a:hover {
|
||||
background-size: contain;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/******************* HEADER *******************/
|
||||
|
||||
#welcome {
|
||||
position: absolute;
|
||||
height: var(--h-info);
|
||||
width: 100%;
|
||||
top: 12.5vh;
|
||||
}
|
||||
|
||||
#welcome img {
|
||||
position: relative;
|
||||
height: calc(var(--h-info) * 0.5);
|
||||
left: 50vw;
|
||||
margin-left: calc(var(--h-info) * 0.25 * -0.70);
|
||||
top: 17vh;
|
||||
}
|
||||
|
||||
.flying-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-size: 0.01vw;
|
||||
background-color: white;
|
||||
padding: 0.5vw;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@ -1,30 +1,24 @@
|
||||
document.addEventListener("DOMContentLoaded", run);
|
||||
|
||||
// global var to control the animation of the text
|
||||
var runTextAnimation = true;
|
||||
function run() {
|
||||
supportFireFox();
|
||||
initializeClickHandler();
|
||||
}
|
||||
|
||||
/* Firefox seems to handle positioning after transform
|
||||
differently to webkit based browsers, therefore this
|
||||
function checks if the current userAgent is FF and sets
|
||||
the required property for bottom from 0 to 15vh */
|
||||
function supportFireFox() {
|
||||
// console.log(navigator.userAgent);
|
||||
if (navigator.userAgent.includes("Firefox")) {
|
||||
// document.getElementById("exhibition").style.bottom = "15vh";
|
||||
}
|
||||
}
|
||||
|
||||
function initializeClickHandler() {
|
||||
let welcome = document.getElementById("welcome");
|
||||
flyingText(welcome);
|
||||
document.addEventListener("click", (e) => {
|
||||
let overlay = document.getElementById("info-box");
|
||||
let curr = e.target;
|
||||
console.log(curr);
|
||||
if (curr.className === "thumb") {
|
||||
runTextAnimation = false;
|
||||
hideElement(welcome);
|
||||
handleThumb(overlay, curr);
|
||||
} else if (curr.id === "btn-close") {
|
||||
hideOverlay(overlay);
|
||||
runTextAnimation = true;
|
||||
flyingText(welcome);
|
||||
hideElement(overlay);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -38,7 +32,8 @@ function showOverlay(overlay, imgName) {
|
||||
let info = getInfoForImg(imgName);
|
||||
// \xD7 is the multiplication sign in hex
|
||||
overlay.children[0].innerHTML =
|
||||
`<div id="btn-close">\xD7</div>
|
||||
`
|
||||
<div id="btn-close">\xD7</div>
|
||||
<div class="magnify">
|
||||
<img id=${imgName} src="/inc/images/${imgName}.jpg" alt="${imgName}" />
|
||||
</div>
|
||||
@ -74,8 +69,8 @@ function showOverlay(overlay, imgName) {
|
||||
zoom(0.4, imgName);
|
||||
}
|
||||
|
||||
function hideOverlay(overlay) {
|
||||
overlay.classList.add("hidden");
|
||||
function hideElement(elem) {
|
||||
elem.classList.add("hidden");
|
||||
}
|
||||
|
||||
// Get info from server
|
||||
|
||||
75
inc/js/text.js
Normal file
75
inc/js/text.js
Normal file
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* 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
|
||||
async function flyingText(canvas) {
|
||||
// TODO: move to argument, load from backend
|
||||
let statements = ["Keyboard-Nerd", "❤", "Emacs",
|
||||
"Life == VI Bindings", "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"];
|
||||
|
||||
let stCount = statements.length;
|
||||
let animationTime = 4;
|
||||
let maxX , maxY, x, y;
|
||||
|
||||
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`;
|
||||
|
||||
// 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);
|
||||
|
||||
// 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 = `2.8vw`;
|
||||
|
||||
// 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));
|
||||
}
|
||||
@ -14,6 +14,7 @@ function zoom(factor, imgName) {
|
||||
// wait till size of img is calculated
|
||||
setTimeout(() => {
|
||||
var offset = {x: img.width * factor, y: img.height * factor};
|
||||
// Fix for firefox, somehow width larger than content (inline-block)
|
||||
magni.style.width = img.width;
|
||||
// setup the padding (bigger zoom canvas)
|
||||
magni.style.padding = offset.y + "px " + offset.x + "px";
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
<a href="">GALLERY</a>
|
||||
<a href="blog.html">BLOG</a>
|
||||
|
||||
<!-- <a class="nav-center"></a> -->
|
||||
<a id="logo" href=""><img src="/inc/logo/logo.svg" alt="" /></a>
|
||||
<!-- <a id="logo" href=""></a> -->
|
||||
<!-- <a class="nav-center"></a> -->
|
||||
|
||||
<a href="about.html">ABOUT</a>
|
||||
<a href="contact.html">CONTACT</a>
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
<div id="bg-box">
|
||||
</div>
|
||||
</section>
|
||||
<section id="welcome">
|
||||
<img id="avatar" alt="" src="/inc/logo/avatar.svg"/>
|
||||
</section>
|
||||
<section id="exhibition">
|
||||
{{range .Pics}}
|
||||
<div class="thumb-box">
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<link href="/inc/css/main.css" rel="stylesheet"/>
|
||||
<script src="/inc/js/main.js"></script>
|
||||
<script src="/inc/js/zoom.js"></script>
|
||||
<script src="/inc/js/text.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
{{block "header" .}}NO HEADER DEFINED{{end}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user