giwuf,
или так ...
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/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;
opacity: var(--o, 0);
}
section {
width: 100%;
height: 500vh;
}
</style>
<script>
onscroll = e => {
const imgs = document.querySelectorAll('img');
const n = Math.floor(pageYOffset / innerHeight);
const m = (pageYOffset % innerHeight)/innerHeight - .7;
imgs.forEach((img, i) => {
i = (n == i) ? 1 - m : (n + 1 == i) ? m : 0;
i = Math.max(0, Math.min(1, i));
img.style.setProperty('--o', i)
})
}
</script>
</head>
<body>
<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>
</body>
</html>