Changing background color with fade animation on scroll in React

Question

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>
    );
  }
}

@AjeetShah, for your reference i have added my code in my question. — Priyanka Panjabi
– Priyanka Panjabi, Commented Apr 11, 2021 at 14:28

Ajeet Shah · Accepted Answer · 2021-04-13 13:56:03Z

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>

Collectives™ on Stack Overflow

Changing background color with fade animation on scroll in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related