This commit is contained in:
Richard Mikloš 2024-01-25 16:05:55 +01:00
parent 279867cca4
commit fe8fdeb113

@ -2,11 +2,23 @@ document.addEventListener('DOMContentLoaded', function () {
var h1 = document.querySelector('.user-index-h1'); var h1 = document.querySelector('.user-index-h1');
var h2 = document.querySelector('.user-index-h2'); var h2 = document.querySelector('.user-index-h2');
// Initial styles for fade-in effect
h1.style.opacity = '0';
h1.style.transform = 'translateX(-20px)';
h2.style.opacity = '0';
h2.style.transform = 'translateX(-20px)';
// 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;
// Add the fade-in class to trigger the animation // Apply the fade-in effect
h1.classList.add('fade-in'); h1.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
h2.classList.add('fade-in'); h1.style.opacity = '1';
h1.style.transform = 'translateX(0)';
h2.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
h2.style.opacity = '1';
h2.style.transform = 'translateX(0)';
}); });