JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frames-container">
  <img class="frame" id="frame1" src="//dummyimage.com/400x300?text=1">
  <img class="frame" id="frame2" src="//dummyimage.com/400x300?text=2">
  <img class="frame" id="frame3" src="//dummyimage.com/400x300?text=3">
  <img class="frame" id="frame4" src="//dummyimage.com/400x300?text=4">
  <img class="frame" id="frame5" src="//dummyimage.com/400x300?text=5">
  <img class="frame" id="frame6" src="//dummyimage.com/400x300?text=6">
  <img class="frame" id="frame7" src="//dummyimage.com/400x300?text=7">
  <img class="frame" id="frame8" src="//dummyimage.com/400x300?text=8">
</div>

CSS

body {
  height: 1000px;
}

#frames-container {
  position: fixed;
}

.frame {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.frame:first-child {
  opacity: 1;
}

JavaScript

var jQ = $.noConflict(),
  frames = jQ('.frame'),
  win = jQ(window),
steps = Math.floor((jQ(document).height() - win.height()) / frames.length),
  index = 1;
console.clear();

win.on('scroll', function() {
  if (win.scrollTop() >= index * steps) {
    jQ(frames[index]).animate({
      'opacity': 1
    }, 50);
		index++;
  } else {
    jQ(frames[index]).animate({
      'opacity': 0
    }, 50);
    index--;
  }
});