Can someone help me with implementing a fading animation for changing the background color on scroll in React? I have successfully achieved the background change effect, but I'm struggling to incorporate the fading effect.
import React from "react";
export default class ScrollBackground extends React.Component {
state = {
bgcolor: "black",
color: "white",
};
listenScrollEvent = (e) => {
if (window.scrollY < 5300) {
return this.setState({
bgcolor: "black",
color: "white",
opacity: 1 - window.scrollY / 5300,
});
} else {
return this.setState({ bgcolor: "white", color: "black", opacity: 0 });
}
};
componentDidMount() {
window.addEventListener("scroll", this.listenScrollEvent);
}
render() {
return (
<div
style={{
background: this.state.bgcolor,
color: this.state.color,
height: "800px",
}}
>
<div id="header">
<h1>fsefd</h1>
</div>
<div id="section_1" className="section">
This is section 1
</div>
<div id="section_2" className="section">
This is section 2
</div>
<div id="section_5" className="section">
This is section 5
</div>
</div>
);
}
}