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

a lot of changes because i didnt like the old code

Browse Source
This commit is contained in:
Richard Mikloš
2024-01-25 15:59:09 +01:00
parent 4f974cfb9e
commit 7ee236b067
1 changed files with 30 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
scripts/pages/user/main.js
View File

@@ -3,15 +3,39 @@ document.addEventListener('DOMContentLoaded', function () {
var h1 = document.querySelector('.user-index-h1'); var h1 = document.querySelector('.user-index-h1');
var h2 = document.querySelector('.user-index-h2'); var h2 = document.querySelector('.user-index-h2');
// Function to check if an element is in the viewport
function isInViewport(element) {
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// Function to handle the scroll event // Function to handle the scroll event
function handleScroll() { function handleScroll() {
// Calculate the opacity based on the scroll position if (isInViewport(headerText)) {
var scrollFraction = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight); // Calculate the fade-in effect based on the scroll position
var opacity = 1 - (scrollFraction*3.5); var scrollFraction = window.scrollY / window.innerHeight;
var translateX = -20 * (1 - scrollFraction);
var opacity = 1 - scrollFraction;
// Apply the opacity to the elements // Apply the fade-in effect to the elements
h1.style.transform = 'translateX(' + translateX + 'px)';
h1.style.opacity = opacity; h1.style.opacity = opacity;
h2.style.transform = 'translateX(' + translateX + 'px)';
h2.style.opacity = opacity; h2.style.opacity = opacity;
} else {
// Reset styles if elements are out of the viewport
h1.style.transform = 'translateX(-20px)';
h1.style.opacity = 0;
h2.style.transform = 'translateX(-20px)';
h2.style.opacity = 0;
}
} }
// Attach the handleScroll function to the scroll event // Attach the handleScroll function to the scroll event