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

Even better animation and timings

This commit is contained in:
Ulysse Cura 2026-03-10 22:05:18 +01:00
parent e8cf525561
commit 5cd9fb6501
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scripts/session_startup_animation.js
View File

@ -41,6 +41,7 @@ async function sessionStartupAnimation()
let text_elem = document.createElement("h1");
text_elem.className = "startup-animation-text";
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++)
{

14
styles/session_startup_animation.css
View File

@ -39,13 +39,19 @@
@keyframes char-animation {
0% {
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% {
top: -10vh;
top: -20vh;
transform: scale(110%) translate();
}
75% {
top: -1vh;
transform: scale(100%) translate(0);
}
90% {
top: -2vh;
@ -82,7 +88,7 @@
opacity: 0;
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-out 1s ease-in 4s;
opacity-fade-out 1s ease-in 4.2s;
}
.startup-animation-author {
@ -96,5 +102,5 @@
text-align: center;
white-space: nowrap;
animation: opacity-fade-in 1s ease-in,
opacity-fade-out 1s ease-in 4s;
opacity-fade-out 1s ease-in 4.2s;
}