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

changes to fade anim

Browse Source
This commit is contained in:
Richard Mikloš
2024-01-25 16:06:43 +01:00
parent fe8fdeb113
commit da637d6228
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/pages/user/main.js
View File

@@ -4,21 +4,21 @@ document.addEventListener('DOMContentLoaded', function () {
// Initial styles for fade-in effect // Initial styles for fade-in effect
h1.style.opacity = '0'; h1.style.opacity = '0';
h1.style.transform = 'translateX(-20px)'; h1.style.transform = 'translateX(-35px)';
h2.style.opacity = '0'; h2.style.opacity = '0';
h2.style.transform = 'translateX(-20px)'; h2.style.transform = 'translateX(-35px)';
// Trigger the reflow to restart the CSS animation // Trigger the reflow to restart the CSS animation
void h1.offsetWidth; void h1.offsetWidth;
void h2.offsetWidth; void h2.offsetWidth;
// Apply the fade-in effect // Apply the fade-in effect
h1.style.transition = 'opacity 0.8s ease, transform 0.8s 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)';
h2.style.transition = 'opacity 0.8s ease, transform 0.8s 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)';
}); });