Как создать экран входа в систему с изменением фоновых изображений?

Question

У меня есть страница входа. Что касается каркасов, на заднем плане есть изображения, которые меняются каждые несколько секунд.

Считайте, что это экран spla sh с формой входа. Я разработал форму входа. Но экран spla sh является проблемой.

Как мне добиться этого с помощью реакции. js?

Любые выводы будут полезны.

Answer 1

Суть состоит в том, чтобы настроить контейнер фонового изображения (вероятно, занимающий 100% высоты и ширины вида) со следующим CSS:

// keep image from scrolling when content is scrollable
background-attachment: fixed;
// center the image within the container
background-position: center;
// scale the image to cover the container the smaller quantity of width or height
background-size: cover;

width: 100vw;
height: 100vh;

Затем в коде выберите свой вариант CSS -in- JS. Мне нравится styled-components, но для краткости я буду использовать встроенный атрибут style:

style={{ backgroundImage: `url(${/* pass reference to image */})` }}

Пример компонента:

import bgImgArray from './assets/img';

function App() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setIndex(i => i + 1), 5000);
    return () => clearInterval(timer);
  }, []);

  const bgImg = bgImgArray[index % bgImgArray.length];

  return (
    <div
      className="App backgroundContainer"
      style={{
        backgroundImage: `url(${bgImg})`
      }}
    >
      /* container content, children, etc.. */
    </div>
  );
}