xoy
/
xoy_loader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Adding better animation timing]

This commit is contained in:
xoy 2023-12-04 21:58:53 +01:00
parent 9a8fce5647
commit 82a120ef5d
2 changed files with 3 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
script.js
View File

@ -5,6 +5,7 @@ const label = "XOY";
const display = document.getElementsByClassName("display")[0]; const display = document.getElementsByClassName("display")[0];
function iterate_characters() { function iterate_characters() {
display.style.transform = (display.style.transform == "scale(2)") ? "scale(1)" : "scale(2)";
display.innerHTML = label.charAt(index); display.innerHTML = label.charAt(index);
index = (index == label.length - 1) ? 0 : index + 1; index = (index == label.length - 1) ? 0 : index + 1;
} }

9
style.css
View File

@ -3,12 +3,6 @@
src: url(Novem.ttf); src: url(Novem.ttf);
} }
@keyframes loading {
from {transform: scale(1);}
50% {transform: scale(2);}
to {transform: scale(1);}
}
html, body { html, body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
@ -27,5 +21,6 @@ div.display {
margin: auto; margin: auto;
text-align: center; text-align: center;
font-size: 100px; font-size: 100px;
animation: loading 2s infinite; transform: scale(1);
transition: transform 500ms;
} }