Twip-Network/watch.twip-network.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made the anim work for admins too

Browse Source
This commit is contained in:
Richard Mikloš 2024-01-25 21:11:41 +01:00
parent 82cf0085b4
commit 8accaa58f4
3 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/admin/index.html
View File

@ -3,8 +3,8 @@
<header class="admin-index-header"> <header class="admin-index-header">
<div class="admin-index-header-text" id="headerText"> <div class="admin-index-header-text" id="headerText">
<h1 class="admin-index-h1 fade-in">Hello,</h1> <h1 class="admin-index-h1">Hello,</h1>
<h2 class="admin-index-h2 fade-in">Admin <span class="outlined-text"><template name="username"></span>!</h2> <h2 class="admin-index-h2">Admin <span class="outlined-text"><template name="username"></span>!</h2>
</div> </div>
</header> </header>

2
scripts/pages/admin/main.js
View File

@ -14,6 +14,7 @@ document.addEventListener('DOMContentLoaded', function () {
void h2.offsetWidth; void h2.offsetWidth;
// Apply the fade-in effect // Apply the fade-in effect
setTimeout(function () {
h1.style.transition = 'opacity 0.8s ease, transform 0.6s ease'; h1.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
h1.style.opacity = '1'; h1.style.opacity = '1';
h1.style.transform = 'translateX(0)'; h1.style.transform = 'translateX(0)';
@ -21,4 +22,5 @@ document.addEventListener('DOMContentLoaded', function () {
h2.style.transition = 'opacity 0.8s ease, transform 0.6s ease'; h2.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
h2.style.opacity = '1'; h2.style.opacity = '1';
h2.style.transform = 'translateX(0)'; h2.style.transform = 'translateX(0)';
}, 250);
}); });

5
styles/pages/admin/style.css
View File

@ -31,8 +31,3 @@ body {
transform: translateX(-35px); transform: translateX(-35px);
transition: opacity 0.8s ease, transform 0.6s ease; transition: opacity 0.8s ease, transform 0.6s ease;
} }
.fade-in {
opacity: 1;
transform: translateX(0);
}