So, I am making a small project using React typescript. I’m pretty new to this, but I would like to make a webpage that changes the background class as I scroll to certain points of the page. My main problems are that I have right now:

1. Cannot find a way to change the background to multiple colors on scroll (with transitions)

2. When I find how to do that, I would like to add effects to the different background colors. Eg, after scrolling from a blank blue screen, transition the background color to pink with falling petals upon scrolling past a certain threshold

This is my code thus far:

App.tsx (the main tsx file)

import "./App.css";
import { useRef, useEffect, useState } from "react";

function App() {
  //The HTML stuff starts below!
  const root = document.documentElement;

  const [color, setColor] = useState("#1646A4");

  const colors: string[] = ["#FF69B4", "#000"];

  if (window.scrollY >= 522) {
    root.style.backgroundColor = "pink";
  }

  return (
    <div>
      <nav className="navbar">
        {/*This is the class for the navigation bar*/}
        <div className="menus">
          {/*This is the class for the menus and their placement*/}
          <h3>Home</h3>
          <h3>First</h3>
          <h3>Second</h3>
          <h3>Third</h3>
        </div>
      </nav>

      <div className="intro">
        {/*This is the class for the welcome letters*/}
        <p>WELCOME!</p>
      </div>

      <div className="about">
        <p className="summary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehender
          it in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
          {/*This is for the rundown of the website*/}
        </p>
      </div>

      <div className="poem1">
        <p className="summary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehender
          it in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
          {/*This is for the rundown of the website*/}
        </p>
      </div>
    </div>
  );
}
export default App;

App.css (the main css code)

body {
  animation: slide 1.5s ease;
}

/* Keyframes for slide animation */
@keyframes slide {
  from {
      transform: translateX(-100vw); /* Start off-screen to the left */
      opacity: 0;
  }
  to {
      transform: translateX(0vw); /* End at the original position */
      opacity: 1;
  }
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 800;

  color-scheme: light dark;
  background-color: #1646A4;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  scroll-behavior: smooth;
}


.navbar {
  position: sticky;
  width: 120px;
  top: 20vh;
  left: 2vw;
  height: 300px;
  background-color: #145DA0;
  border-radius: 20px;
}

.menus {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 18px;
  font-style: normal;
  line-height: normal;
  text-align: center;
  color: #052844;
}

.menus h3 {
  position: relative; /* Needed to position the ::after element */
}

.menus h3::after {
  content: "";
  position: absolute;
  background-color: aliceblue;
  height: 3px;
  width: 0;
  left: 50%; /* Add this */
  transform: translateX(-50%);
  bottom: -10px;
  transition: width 0.1s ease-in-out;
  transform-origin: center;
}

.menus h3:hover::after {
  width: 60%;
}

.intro {
  position: relative;
  font-size: 120px;
  text-align: center;
  top: -30vw;
}

.about {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 700px;
  height: 300px;
  top: -72vh;
  background-color: rgba(55, 190, 176, 0.6); /* Corrected rgba syntax */
  border-radius: 25px;
  box-shadow: 2px 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
  margin-inline: auto;
   margin-bottom: 500px;
}

.summary {
  width: 500px;
  height: 200px;
  opacity: 1;
  white-space: pre-line;
  color: #86d7cf;
}

.poem1{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 300px;
  background-color: rgba(55, 190, 176, 0.6); /* Corrected rgba syntax */
  border-radius: 25px;
  box-shadow: 2px 0px 0px 2px rgba(0, 0, 0, 0.25) inset;
  margin-inline: auto;
  margin-bottom: 1000px;
}

Index.html (The primary html file)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>