When I scroll, my header image fades away. I used JavaScript in my React app to achieve this effect:
useEffect(() => {
const handleScroll = () => {
if (parallaxDiv.current) {
parallaxDiv.current.style.backgroundPositionY = `${
window.pageYOffset * -0.4
}px`;
parallaxDiv.current.style.opacity = `${1 - +window.pageYOffset / 550}`;
parallaxDiv.current.style.top = `${+window.pageYOffset}px`;
}
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll"s;, handleScroll);
}, []);
While this works for the image, I am facing an issue with a gradient
<div className="gradient" />position: absolute; and bottom: 0;, but it does not move as intended when scrolling. Furthermore, only the image should fade out, not the gradient.
You can view a working example of what I have so far on CodeSandbox.
How can I resolve this issue?
Is there a simpler CSS method to achieve the same visual effect?