Twip-Network/watch.twip-network.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

might work

Browse Source
This commit is contained in:
Richard Mikloš 2024-01-25 12:36:19 +01:00
parent fac905199e
commit d0dce86e57
2 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/user/index.html
View File

@ -1,4 +1,3 @@
<!--PAGENAME=Hello, <template name="username">-->
<header class="user-index-header"> <header class="user-index-header">
<div class="user-index-header-text" id="headerText"> <div class="user-index-header-text" id="headerText">
<h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1> <h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
@ -6,14 +5,13 @@
</div> </div>
</header> </header>
<script> <script>
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const headerText = document.getElementById("headerText"); const headerText = document.getElementById("headerText");
window.addEventListener("scroll", function () { window.addEventListener("scroll", function () {
const scrollPosition = window.scrollY; const scrollPosition = window.scrollY;
const opacity = 1 - scrollPosition / 500; // Adjust the divisor for a smoother or faster fade const opacity = 1 - scrollPosition / 500;
headerText.style.opacity = opacity.toFixed(2); headerText.style.opacity = opacity.toFixed(2);
headerText.style.transform = `translateX(${100 - opacity * 100}%)`; headerText.style.transform = `translateX(${100 - opacity * 100}%)`;

10
styles/global.css
View File

@ -1,13 +1,16 @@
/* Common styles for all pages */ /* Common styles for all pages */
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #161c21; background-color: #161c21;
color: aliceblue; color: aliceblue;
overflow-x: hidden; /* Prevent horizontal scrolling */ overflow-x: hidden;
} }
h2 { h2 {
text-align: center; text-align: center;
} }
@ -27,8 +30,6 @@ a {
border-radius: 50px; border-radius: 50px;
} }
.user-index-header-text { .user-index-header-text {
width: 80%; width: 80%;
margin: auto; margin: auto;
@ -53,6 +54,3 @@ a {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-text-stroke: 2.2px #8c00ff; -webkit-text-stroke: 2.2px #8c00ff;
} }