22 lines
876 B
HTML
22 lines
876 B
HTML
<!--PAGENAME=Hello, <template name="username">-->
|
|
<header class="user-index-header">
|
|
<div class="user-index-header-text" id="headerText">
|
|
<h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
|
|
<h2 class="user-index-h2">What would you like to watch?</h2>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const headerText = document.getElementById("headerText");
|
|
|
|
window.addEventListener("scroll", function () {
|
|
const scrollPosition = window.scrollY;
|
|
const opacity = 1 - scrollPosition / 500; // Adjust the divisor for a smoother or faster fade
|
|
|
|
headerText.style.opacity = opacity.toFixed(2);
|
|
headerText.style.transform = `translateX(${100 - opacity * 100}%)`;
|
|
});
|
|
});
|
|
</script> |