JSFiddle - React, Tailwind, and code Playground

by Leonel Colina Tang

HTML

<script src="http://www.shortlist.com/resource/binary/e461d9b8eee234af131d4339662991c9/comiccharcters480.gif"></script>
<div id="main">
  
  <div id="container"></div>
  
</div>

CSS

#main
{
  height: 2000px;
  width: 100%;
  overflow: scroll;
}

#container
{
  position: absolute;
  height: 700px;
  width: 100%;
  }
  
  
.blue
{
  background : url(http://i.imgur.com/Hhmt8.gif?v=) !important;
}

.red
{
  background: url(http://i.imgur.com/TUAwA.gif?v=) !important;
}

JavaScript

$(window).ready(function () {
 $(window).on("scroll", function () {
 var scrollTop = $(this).scrollTop();
 var v=0;
   if (scrollTop > 100 && scrollTop < 200) {
   
  		++v;
      $('#container').css('background-image', 'url(http://i.imgur.com/Hhmt8.gif?v='+v+')');
       
     }else if(scrollTop >= 200){
				++v;
        $('#container').css('background-image', 'url(http://i.imgur.com/TUAwA.gif?v='+v+')');
        }
      else
        {
        	$('.imageHolder').css('background', 'blue');
        }
        
    });
    
});