linuxposting/tilde-site
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

animations are now skippable yay

Browse source
This commit is contained in:
Luna 2025-11-14 22:16:40 -03:00
parent 08d04f2667
commit 556e471281
3 changed files with 44 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/base.css
View file

@ -139,6 +139,16 @@ main {
position: fixed
}
.skip-animation {
animation: 4.5s 1 linear appear;
visibility: hidden;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.loading > p:first-child {
animation: 1s 1 linear appear;
animation-fill-mode: forwards;

26
assets/main.js Normal file
View file

@ -0,0 +1,26 @@
let stylesheet
window.addEventListener("load", () => {
stylesheet = document.styleSheets[0];
let skipNode = document.createElement("div");
skipNode.setAttribute("class", "skip-animation");
skipNode.setAttribute("onclick", "skipAnimation()");
document.body.appendChild(skipNode);
});
function skipAnimation() {
for (let node of document.getElementsByClassName("skip")) {
const animations = node.getAnimations();
for (let anim of animations) {
anim.finish();
}
}
for (let node of document.getElementsByClassName("splash")) {
const animations = node.getAnimations();
for (let anim of animations) {
anim.finish();
}
}
document.getElementsByClassName("skip-animation")[0].remove();
}

15
index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="skip">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,17 +10,17 @@
</head>
<body>
<div class="loading">
<p>Connecting.</p>
<p>Connecting..</p>
<p>Connecting...</p>
<p class="skip">Connecting.</p>
<p class="skip">Connecting..</p>
<p class="skip">Connecting...</p>
</div>
<div class="splash splash-1">│. .
│ ├┐ ─┐/┌┐┌┐┌ ├ ├┐┌┐ ─┐/ ─┐ ┌─┐ ╷
││││││ │ ││││└┐│ │││││ │ ││┌┘ ╵ └─┘
└ └┘/└─├┘└┘─┘└─ └┤./└─└┤└─
┘ ┘ </div>
<div class="nojs"><main>
<span class="title nojs">Linuxposting Tilde</span>
<div class="nojs skip"><main>
<span class="title nojs skip">Linuxposting Tilde</span>
<div class="ascii ascii-1">\ * __ * __ _
\ \ \_ \ \ \| ,_ ,_ \_ \- \ \_ ,-\ \|\ \ _\ / \_/
\_ \ \\ \_\ |\ \_\ \_\ _\ \_ \ \\ \_\ *|\ \_\ \__
@ -63,6 +63,7 @@
<li><a href="https://element.linuxposting.xyz">Element</a></li>
</ul>
</main></div>
<span class="credit"><a href="https://girlkissing.tips">site by Magdalunaa :3</a></span>
<span class="credit skip"><a href="https://girlkissing.tips">site by Magdalunaa :3</a></span>
</body>
<script src="/assets/main.js"></script>
</html>