JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>
    <li>
      <img id="img0" style="--o: 1" src="https://picsum.photos/500?random=1">
    </li>
    <li>
      <img id="img1" style="--o: 0" src="https://picsum.photos/500?random=2">
    </li>
    <li>
      <img id="img2" style="--o: 0" src="https://picsum.photos/500?random=3">
    </li>
    <li>
      <img id="img3" style="--o: 0" src="https://picsum.photos/500?random=4">
    </li>
    <li>
      <img id="img4" style="--o: 0" src="https://picsum.photos/500?random=5">
    </li>
  </ul>
</div>
<section></section>

CSS

* {
  margin: 0;
  padding: 0;
}

div {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: tomato;
  overflow: hidden;
}

ul {
  position: relative;
}

li {
  position: absolute;
  width: 40%;
}

img {
  display: block;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  transition: 0.3s;
  opacity: var(--o);
}

section {
  width: 100%;
  height: 500vh;
}

JavaScript

onscroll = e => {
	const n = Math.floor(pageYOffset / innerHeight)
	const current = 'img' + n
  const prev = 'img' + Math.max((n - 1), 0)
  const next = 'img' + Math.min((n + 1), 4)
  document.getElementById(prev).style.setProperty('--o', 0)
  document.getElementById(next).style.setProperty('--o', 0)
  document.getElementById(current).style.setProperty('--o', 1)
}