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">
<div class="admin-index-header-text" id="headerText">
<h1 class="admin-index-h1 fade-in">Hello,</h1>
<h2 class="admin-index-h2 fade-in">Admin <span class="outlined-text"><template name="username"></span>!</h2>
<h1 class="admin-index-h1">Hello,</h1>
<h2 class="admin-index-h2">Admin <span class="outlined-text"><template name="username"></span>!</h2>
</div>
</header>

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

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

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

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