JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:200px"></div>
 <div id="container">
  <img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
  <img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
  <img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
  <img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
  <img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>

<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>

<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p><p> to scroll</p><p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to scroll</p>
<p> to...

CSS

.animated { display: none;}
.show { display: block;}

#container{
    position:fixed;
    top: 0;
    left: 0;
}

JavaScript

function animationTimer(){
    canChange = true;
}


var container = $('#container'),
    nImg = 0,
    imgNum = $('#container img').length,
    topDiv = (container.offset() || { "top": NaN }).top,
    canChange = true;

$(window).bind('scroll', function() {
    if(canChange)
    {
        canChange = false;
        setTimeout(animationTimer, 250);
        var y = $(this).scrollTop();        
        if(y>topDiv){
            nImg++;   
        }else{
            nImg--;   
        }
        if(nImg>=imgNum){ nImg = 0; }
        if(nImg<0){ nImg = imgNum-1; }
        
        $(".animated").each(function(){ 
            $(this).removeClass("show")            
        });
        $(".animated").eq(nImg).addClass("show");
    }
    
});