ulysse
/
Website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ulysse:e8cf5255617b079b38fc2aa0287d6f3f7c774169
Branches Tags
ulysse:main
...
compare: ulysse:4f4939b8c3acaa38ff6c9ecc4d91d8167641a154
Branches Tags
ulysse:main

2 Commits
e8cf525561 ... 4f4939b8c3

Author SHA1 Message Date
Ulysse Cura 4f4939b8c3 Censored UN*X for obvious reasons... 2026-03-10 22:05:44 +01:00
Ulysse Cura 5cd9fb6501 Even better animation and timings 2026-03-10 22:05:18 +01:00
3 changed files with 12 additions and 5 deletions
Show Stats Expand all files Collapse all files

2
assets/startup_quotes.json
View File

@ -21,7 +21,7 @@
"author": "Dennis Ritchie" "author": "Dennis Ritchie"
}, },
{ {
"text": "UNIX", "text": "UN*X",
"author": "Dennis Ritchie" "author": "Dennis Ritchie"
}, },
{ {

1
scripts/session_startup_animation.js
View File

@ -41,6 +41,7 @@ async function sessionStartupAnimation()
let text_elem = document.createElement("h1"); let text_elem = document.createElement("h1");
text_elem.className = "startup-animation-text"; text_elem.className = "startup-animation-text";
text_elem.style.setProperty("--delay", String(200 / quote.text.length)); text_elem.style.setProperty("--delay", String(200 / quote.text.length));
text_elem.style.setProperty("--half-text-len", String((quote.text.length - 1) / 2));
for(let i = 0; i < quote.text.length; i++) for(let i = 0; i < quote.text.length; i++)
{ {

14
styles/session_startup_animation.css
View File

@ -39,13 +39,19 @@
@keyframes char-animation { @keyframes char-animation {
0% { 0% {
filter: hue-rotate(45deg); filter: hue-rotate(45deg);
top: 75vh; top: 110vh;
transform: scale(800%) translate(calc((var(--char-nb) - var(--half-text-len)) * 5vh));
}
35% {
transform: scale(150%) translate(calc((var(--char-nb) - var(--half-text-len)) * -3vh));
} }
45% { 45% {
top: -10vh; top: -20vh;
transform: scale(110%) translate();
} }
75% { 75% {
top: -1vh; top: -1vh;
transform: scale(100%) translate(0);
} }
90% { 90% {
top: -2vh; top: -2vh;
@ -82,7 +88,7 @@
opacity: 0; opacity: 0;
animation: char-animation 2.9s ease-in-out calc(var(--delay) * var(--char-nb) * 1ms + 1s), animation: char-animation 2.9s ease-in-out calc(var(--delay) * var(--char-nb) * 1ms + 1s),
opacity-fade-in 1s calc(var(--delay) * var(--char-nb) * 1ms + 1s), opacity-fade-in 1s calc(var(--delay) * var(--char-nb) * 1ms + 1s),
opacity-fade-out 1s ease-in 4s; opacity-fade-out 1s ease-in 4.2s;
} }
.startup-animation-author { .startup-animation-author {
@ -96,5 +102,5 @@
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
animation: opacity-fade-in 1s ease-in, animation: opacity-fade-in 1s ease-in,
opacity-fade-out 1s ease-in 4s; opacity-fade-out 1s ease-in 4.2s;
} }