watch.twip-network.org/pages/user/index.html
2024-01-25 12:36:19 +01:00

20 lines
773 B
HTML

<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;
headerText.style.opacity = opacity.toFixed(2);
headerText.style.transform = `translateX(${100 - opacity * 100}%)`;
});
});
</script>