and changed it all again cause why not..
This commit is contained in:
parent
7ee236b067
commit
e6afb0f776
@ -3,44 +3,15 @@ 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
|
// Calculate the fade-in effect based on the window width
|
||||||
function isInViewport(element) {
|
var scrollFraction = window.innerWidth / window.innerWidth;
|
||||||
var rect = element.getBoundingClientRect();
|
var translateX = 20 * (1 - scrollFraction);
|
||||||
return (
|
var opacity = 1 - scrollFraction;
|
||||||
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
|
// Apply the fade-in effect to the elements
|
||||||
function handleScroll() {
|
h1.style.transform = 'translateX(' + translateX + 'px)';
|
||||||
if (isInViewport(headerText)) {
|
h1.style.opacity = opacity;
|
||||||
// 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
|
h2.style.transform = 'translateX(' + translateX + 'px)';
|
||||||
h1.style.transform = 'translateX(' + translateX + 'px)';
|
h2.style.opacity = opacity;
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user