React Background Image Change Animation

Question

I'm working on a weather app with ReactJS, what i'm trying to do is have a slideshow of images for my background, the images will be full screen, fading from one to the other as well as having some movement.

What I have done so far is successfully change my background images using the useRef hook and setInterval, adding a different class to the current slide. I've also added a keyframes animation in there for the image opacity.

The images themselves are all contained inside its own component <Background />, with it being a lower priority as the main content using z-index.

Is this approach best practise? What's not ideal is that if I decide to change the amount of time for my setInterval, i'll have to then go to my css file to change the animation timing. Is it also a good idea to have this as a component itself?

If anyone has any tips or improvements relating to background then please get in touch. Thank you.

An example for this can be found here:

https://codesandbox.io/s/background-example-4ffelz?file=/src/Background

Here is my Background component and Background css file.

Background.js

import { useState, useRef, useEffect } from "react";
import img1 from "../images/clouds.jpg";
import img2 from "../images/clouds2.jpg";
import img3 from "../images/sun.jpg";
import img4 from "../images/wind.jpg";
import "../Background.css";
const Background = () => {
  const images = [img1, img2, img3, img4];
  const [currentSlide, setCurrentSlide] = useState(0);
  // useRef does not cause a re-render
  let sliderInterval = useRef();
  let switchImages = () => {
    if (currentSlide < images.length - 1) {
      setCurrentSlide(currentSlide + 1);
    } else {
      setCurrentSlide(0);
    }
  };
  useEffect(() => {
    sliderInterval = setInterval(() => {
      switchImages();
    }, 5000);
    return () => {
      clearInterval(sliderInterval);
    };
  });
  return (
    <div className="imgWrapper">
      {images.map((img, index) => {
        return (
          <img
            src={img}
            className={
              index === currentSlide ? "imageActive homeImage" : "image"
            }
          />
        );
      })}
    </div>
  );
};

export default Background;

Background.css

.home-img {
  max-width: 100%;
}
.image {
  display: none;
}
.imgWrapper {
  width: 100vw;
  height: 100vh;
}
@keyframes blender {
  0% {
    opacity: 0;
    transform: translate(-25px);
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-10px);
  }
}
.imageActive {
  float: left;
  width: 150vw;
  height: 100vh;
  object-fit: cover;
  box-sizing: border-box;
  opacity: 0;
  animation: blender 5s linear 50ms;
}

Answer 1

This website can help you a lot on finding the best transition animation