CODEWITHSUNDEEP
javascriptcssreactjscss-transitions
Priyanka Panjabi
Priyanka Panjabi

Reputation: 441

Changing background color with fade animation on scroll in React

Is there any way to implement changing background color with fade animation on scroll in React? I am able to achieve background change effect on scroll, but I am unable to add 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>
    );
  }
}

Upvotes: 1

Views: 1179

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19813

You need to use CSS transition, e.g.: transition: "background-color 0.5s ease". to create fading effect.

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.

For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

Also, don't forget to use debounce. Demo:

const { debounce } = _;
const { Component } = React;

class App extends Component {
  state = {
    bgcolor: "black",
    color: "white",
  };

  listenScrollEvent = debounce((e) => {
    if (window.scrollY < 400) {
      return this.setState({
        bgcolor: "black",
        color: "white",
        opacity: 1 - window.scrollY / 5300,
      });
    } else {
      return this.setState({ bgcolor: "white", color: "black", opacity: 0 });
    }
  }, 50);

  componentDidMount() {
    window.addEventListener("scroll", this.listenScrollEvent);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.listenScrollEvent);
  }

  render() {
    return (
      <div
        style={{
          background: this.state.bgcolor,
          transition: "background-color 0.5s ease",
          color: this.state.color,
          height: 1000,
        }}
      >
        <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>
    );
  }
}

ReactDOM.render(<App />, document.body)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Upvotes: 1

Related Questions