hopefully cool thing
This commit is contained in:
parent
e63ce6ec5a
commit
fac905199e
@ -1,7 +1,22 @@
|
||||
<!--PAGENAME=Hello, <template name="username">-->
|
||||
<header>
|
||||
<div class="user-index-header-text">
|
||||
<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>
|
@ -1,10 +1,11 @@
|
||||
/* Common styles for all pages */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #161c21;
|
||||
color: aliceblue;
|
||||
overflow-x: hidden; /* Prevent horizontal scrolling */
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -33,18 +34,25 @@ a {
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: opacity 0.8s ease, transform 1s ease;
|
||||
}
|
||||
|
||||
.user-index-h1 {
|
||||
font-size: 4rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.user-index-h2 {
|
||||
font-size: 3.3rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.outlined-text {
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke: 2.2px #8c00ff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user