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

Much more css oriented implementation of animation. Simpler ? I hope !

This commit is contained in:
Ulysse Cura 2026-03-10 21:11:19 +01:00
parent ce7acda52f
commit e8cf525561
2 changed files with 27 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
scripts/session_startup_animation.js
View File

@ -37,53 +37,41 @@ async function sessionStartupAnimation()
let quotes = JSON.parse(xmlhttp.responseText)["quotes"]; let quotes = JSON.parse(xmlhttp.responseText)["quotes"];
let quote = quotes[Math.floor(Math.random() * quotes.length)]; let quote = quotes[Math.floor(Math.random() * quotes.length)];
// First the author // Add quote
let author_elem = document.createElement("h2");
author_elem.className = "startup-animation-author";
author_elem.innerHTML = quote.author + "<sup>®</sup>";
document.body.appendChild(author_elem);
await waitForAnimationEnd(author_elem, "opacity-fade-in")
// Then the text and sound
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));
let time_between_chars = 200 / quote.text.length; // ms
for(let i = 0; i < quote.text.length; i++) for(let i = 0; i < quote.text.length; i++)
{ {
let char_elem = document.createElement("div"); let char_elem = document.createElement("div");
char_elem.className = "startup-animation-char" char_elem.className = "startup-animation-char"
char_elem.style.animation = char_elem.style.setProperty("--char-nb", String(i));
"char-animation 3s ease-in-out " + String(i * time_between_chars) +
"ms, opacity-fade-in 1s " + String(i * time_between_chars) + "ms"; char_elem.onanimationstart = (event) => {
char_elem.onanimationstart = null;
event.target.style.opacity = 1;
};
if(quote.text[i] == " ") if(quote.text[i] == " ")
char_elem.innerHTML = "<pre>" + quote.text[i] + "</pre>"; char_elem.innerHTML = "&nbsp;";
else else
char_elem.textContent = quote.text[i]; char_elem.textContent = quote.text[i];
console.log(char_elem.onanimationend);
text_elem.appendChild(char_elem); text_elem.appendChild(char_elem);
} }
let author_elem = document.createElement("h2");
author_elem.className = "startup-animation-author";
author_elem.innerHTML = quote.author + "<sup>®</sup>";
author_elem.onanimationend = () => {
author_elem.onanimationend = null;
sound.play();
};
document.body.appendChild(text_elem); document.body.appendChild(text_elem);
document.body.appendChild(author_elem);
sound.play();
await waitForAnimationEnd(text_elem.firstChild, "opacity-fade-in");
text_elem.childNodes.forEach((char_elem) => char_elem.style.opacity = 1);
await waitForAnimationEnd(text_elem.lastChild, "char-animation");
// Fade out for both
text_elem.style.animation = "opacity-fade-out 1s ease-in";
text_elem.style.opacity = 0;
author_elem.style.animation = "opacity-fade-out 1s ease-in";
author_elem.style.opacity = 0;
await waitForAnimationEnd(text_elem, "opacity-fade-out"); await waitForAnimationEnd(text_elem, "opacity-fade-out");
@ -114,8 +102,8 @@ function interruptStartingAnimation()
let text_elem = document.body.querySelectorAll(".startup-animation-char"); let text_elem = document.body.querySelectorAll(".startup-animation-char");
text_elem.forEach((char_elem) => char_elem.getAnimations().forEach((animation) => { text_elem.forEach((char_elem) => char_elem.getAnimations().forEach((animation) => {
// No need to skip fade-out because it is handled by startup-animation-text // No need to skip fade-out because it is handled by startup-animation-text
if(animation.currentTime < 2800) if(animation.currentTime < 3600)
animation.currentTime = 2800; animation.currentTime = 3600;
})); }));
if(sound.currentTime < 2.75) if(sound.currentTime < 2.75)

8
styles/session_startup_animation.css
View File

@ -68,7 +68,7 @@
width: 100%; width: 100%;
top: 23%; top: 23%;
text-align: center; text-align: center;
align-items: end; align-items: flex-end;
justify-content: center; justify-content: center;
display: flex; display: flex;
} }
@ -80,6 +80,9 @@
.startup-animation-char { .startup-animation-char {
position: relative; position: relative;
opacity: 0; 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;
} }
.startup-animation-author { .startup-animation-author {
@ -92,5 +95,6 @@
bottom: 20%; bottom: 20%;
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;
} }