Skip to content

Commit 2e448c6

Browse files
error-four-o-fourerror-four-o-four
committed
feat: add moar animations
1 parent 433f4d0 commit 2e448c6

6 files changed

Lines changed: 115 additions & 12 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111

1212
<body>
13-
<nav id="nav-navbar">
13+
<nav>
1414
<div class="container-960">
1515
<ul id="ul-navbar">
1616
<li>

‎src/css/welcome.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@
88

99
z-index: 1;
1010
background-image: linear-gradient(to bottom, #09090999 50%, transparent);
11+
12+
#txt-animated {
13+
position: relative;
14+
}
15+
#txt-animated::after {
16+
content: '|';
17+
position: absolute;
18+
top: -0.325rem;
19+
right: -0.75rem;
20+
display: none;
21+
}
22+
#txt-animated.cursor::after {
23+
display: block;
24+
}
1125
}
1226

1327
#div-welcome-pfp {

‎src/js/animation.js‎

Lines changed: 94 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,58 @@
11
import elements from './elements.js';
22

33
const { welcome } = elements.sections;
4-
const { pfp, pfpBg } = elements;
4+
const { pfp, pfpBg, txt } = elements;
55

6-
const animationDelay = 1000;
6+
// txt
7+
8+
const strings = ['<code/>', '() => code;', 'SELECT * FROM code;'];
9+
10+
const stringDelay = 100;
11+
let displayCursor = false;
12+
let index = 0;
13+
14+
export async function playTxtAnimation() {
15+
await delay(5000);
16+
eraseString();
17+
}
18+
19+
function showCursor() {
20+
setInterval(() => {
21+
txt.classList.toggle('cursor');
22+
}, 700);
23+
}
24+
25+
async function eraseString() {
26+
if (!displayCursor) {
27+
showCursor();
28+
displayCursor = true;
29+
}
30+
await delay(3000);
31+
let id = setInterval(() => {
32+
txt.textContent = txt.textContent.slice(0, -1);
33+
if (txt.textContent.length === 0) {
34+
clearInterval(id);
35+
id = null;
36+
index = (index + 1) % strings.length;
37+
writeString();
38+
}
39+
}, stringDelay);
40+
}
41+
42+
async function writeString() {
43+
await delay(1000);
44+
const s = strings[index];
45+
let i = 0;
46+
let id = setInterval(async() => {
47+
txt.textContent = s.slice(0, i);
48+
i += 1;
49+
if (i > s.length) {
50+
clearInterval(id);
51+
id = null;
52+
eraseString();
53+
}
54+
}, stringDelay)
55+
}
756

857
// Background
958

@@ -22,12 +71,13 @@ const transform = [
2271
'translateY(-5%) scale(0.875, 1.1)',
2372
'translateY(0%) scale(1)',
2473
];
74+
2575
const filter = [
2676
'brightness(0.25) drop-shadow(0 -0.25rem 0.5rem black) blur(2px)',
27-
'brightness(1.0) drop-shadow(0 0.5rem 0.5rem black) blur(0)',
77+
'brightness(1.0) drop-shadow(0 0.5rem 0.75rem black) blur(0)',
2878
];
2979

30-
const pfpKeyframes = [
80+
const pfpIntroKeyframes = [
3181
{
3282
marginBottom: '15%',
3383
transform: transform[0],
@@ -62,18 +112,48 @@ const pfpKeyframes = [
62112
offset: 1,
63113
},
64114
];
65-
const pfpOptions = {
115+
116+
const pfpIntroOptions = {
66117
duration: 2000,
67118
easing: 'ease-in-out',
68119
};
69120

70-
export async function playAnimation() {
71-
await new Promise((res) => setTimeout(() => res(), animationDelay));
121+
const pfpKeyframes = [
122+
{
123+
transform: 'scale(1)',
124+
marginBottom: '7.5%',
125+
offset: 0,
126+
},
127+
{
128+
transform: 'scale(0.975, 1.025)',
129+
marginBottom: '7.5%',
130+
offset: 0.325,
131+
},
132+
{
133+
transform: 'scale(1)',
134+
marginBottom: '7.5%',
135+
offset: 1,
136+
},
137+
];
138+
139+
const pfpOptions = {
140+
duration: 4000,
141+
easing: 'ease-in-out',
142+
iterations: Infinity,
143+
};
144+
145+
const animationDelay = 1000;
146+
147+
export async function playPfpAnimation() {
148+
await delay();
72149
welcome.classList.remove('loading');
73150

74151
pfp.style.transformOrigin = 'bottom center';
75152
animateTo(pfpBg, bgKeyframes, bgOptions);
76-
animateTo(pfp, pfpKeyframes, pfpOptions);
153+
const intro = animateTo(pfp, pfpIntroKeyframes, pfpIntroOptions);
154+
intro.onfinish = () => {
155+
animateTo(pfp, pfpKeyframes, pfpOptions);
156+
};
77157
}
78158

79159
function animateTo(elt, keyframes, options) {
@@ -87,3 +167,9 @@ function animateTo(elt, keyframes, options) {
87167
});
88168
return animation;
89169
}
170+
171+
function delay(ms = 1000) {
172+
return new Promise((res) => {
173+
setTimeout(res, ms);
174+
});
175+
}

‎src/js/elements.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const sections = ['#section-welcome', '#section-projects', '#section-about'].red
77

88
const pfpBg = document.getElementById('img-pfp-bg');
99
const pfp = document.getElementById('img-pfp');
10+
const txt = document.getElementById('txt-animated');
1011

1112
const cards = [...document.querySelectorAll('.project-card')];
1213

@@ -27,6 +28,7 @@ export default {
2728
sections,
2829
pfpBg,
2930
pfp,
31+
txt,
3032
cards,
3133
uls,
3234
links,

‎src/main.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './style.css';
22

33
import elements from './js/elements.js';
44

5-
import { playAnimation } from './js/animation.js';
5+
import { playTxtAnimation, playPfpAnimation } from './js/animation.js';
66
import { createNavbarListener } from './js/navigation.js';
77
import { createSectionObserver } from './js/observers.js';
88
import { injectSvgs, lazyLoadAllImages, promisedAnimationImages, promisedSvgs } from './js/loaders.js';
@@ -21,8 +21,9 @@ createNavbarListener();
2121
createSectionObserver();
2222

2323
window.addEventListener('load', () => {
24-
promisedAnimationImages.then(playAnimation);
24+
promisedAnimationImages.then(playPfpAnimation);
2525
promisedSvgs.then(injectSvgs);
2626

2727
lazyLoadAllImages();
28+
playTxtAnimation();
2829
});

‎ssg/elements/navbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { injectSvgLink, stringToFragment } from '../utils.js';
44
const ulId = 'ul-navbar';
55

66
const tmplNavbar = `
7-
<nav id="nav-navbar">
7+
<nav>
88
<div class="container-960">
99
<ul id="${ulId}"></ul>
1010
</div>

0 commit comments

Comments
 (0)