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

and changed it all again cause why not..

Browse Source
This commit is contained in:
Richard Mikloš 2024-01-25 16:00:28 +01:00
parent 7ee236b067
commit e6afb0f776
1 changed files with 9 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,44 +3,15 @@ document.addEventListener('DOMContentLoaded', function () {
var h1 = document.querySelector('.user-index-h1');
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)
);
}
// Calculate the fade-in effect based on the window width
var scrollFraction = window.innerWidth / window.innerWidth;
var translateX = 20 * (1 - scrollFraction);
var opacity = 1 - scrollFraction;
// Function to handle the scroll event
function handleScroll() {
if (isInViewport(headerText)) {
// Calculate the fade-in effect based on the scroll position
var scrollFraction = window.scrollY / window.innerHeight;
var translateX = -20 * (1 - scrollFraction);
var opacity = 1 - scrollFraction;
// Apply the fade-in effect to the elements
h1.style.transform = 'translateX(' + translateX + 'px)';
h1.style.opacity = opacity;
// Apply the fade-in effect to the elements
h1.style.transform = 'translateX(' + translateX + 'px)';
h1.style.opacity = opacity;
h2.style.transform = 'translateX(' + translateX + 'px)';
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
window.addEventListener('scroll', handleScroll);
// Initial check on page load
handleScroll();
h2.style.transform = 'translateX(' + translateX + 'px)';
h2.style.opacity = opacity;
});