document.addEventListener('DOMContentLoaded', function () {
    var headerText = document.getElementById('headerText');
    var h1 = document.querySelector('.user-index-h1');
    var h2 = document.querySelector('.user-index-h2');

    // Calculate the fade-in effect based on the window width
    var scrollFraction = window.innerWidth / window.innerWidth;
    var translateX = 20 * (1 - scrollFraction);
    var opacity = 1 - scrollFraction;

    // Apply the fade-in effect to the elements
    h1.style.transform = 'translateX(' + translateX + 'px)';
    h1.style.opacity = opacity;

    h2.style.transform = 'translateX(' + translateX + 'px)';
    h2.style.opacity = opacity;
});