2024-01-25 15:50:51 +01:00
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
var headerText = document.getElementById('headerText');
|
|
|
|
var h1 = document.querySelector('.user-index-h1');
|
|
|
|
var h2 = document.querySelector('.user-index-h2');
|
|
|
|
|
2024-01-25 16:00:28 +01:00
|
|
|
// 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;
|
2024-01-25 15:59:09 +01:00
|
|
|
|
2024-01-25 16:00:28 +01:00
|
|
|
// Apply the fade-in effect to the elements
|
|
|
|
h1.style.transform = 'translateX(' + translateX + 'px)';
|
|
|
|
h1.style.opacity = opacity;
|
2024-01-25 15:59:09 +01:00
|
|
|
|
2024-01-25 16:00:28 +01:00
|
|
|
h2.style.transform = 'translateX(' + translateX + 'px)';
|
|
|
|
h2.style.opacity = opacity;
|
2024-01-25 15:50:51 +01:00
|
|
|
});
|