JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="main">
 

    
    
    <div id="circles">
 
        	<div id="shaddow1" class="circle"><img src="http://banjo.no/stackOwerflow/images/skygge1.png" alt=""/></div>
             
        	<div id="circle1" class="circle"><img src="http://banjo.no/stackOwerflow/images/sirkel1.png" alt=""/></div>
            
      		<div id="div1" class="circle"> <img src="http://banjo.no/stackOwerflow/images/inner.png" alt=""/></div>
            
    </div>
    <!--end circles-->
    

    
  </div>
  <!--  main--> 
</div>
<!--wrapper-->

CSS

body {
  padding:0;
  margin:0;
  min-width:1000px;
}


#wrapper{
  width:990px;
  margin: 0 auto;
  
}
  #wrapper #main{
    padding:0;
    width: 100%;
    height:5000px;
    position:relative;
    margin:0;
  }


.circle {
	position: absolute;
	overflow:hidden;
	}
	
.circle img{
	width: 100%;
	}

#circles{
	display: block;
    height: 407px;
    left: 50%;
    margin: 0 0 0 -203.5px;
    position: fixed;
    top: 100px;
    width: 407px;
	background: #C9C;
	}
	

	
#div1{
	width: 0px;
	left: 50%;
	top: 50%;
	max-width: 188px;
	}
	
#circle1{
	width: 0;
	left: 50%;
	top: 50%;
	max-width: 232px;
	}
	
#shaddow1{
	width: 0;
	left: 50%;
	top: 50%;
	max-width: 232px;
	}

JavaScript

$(document).ready(function() {	
	
	doStuff();
  
  $(document).scroll(function() {
    
    
    var levelScroll = $(document).scrollTop();
			
				
	doStuff();
			
	
	  var show1 = $("#shaddow1").width();
	  var c1w = $("#circle1").width();		
	  var div1W = $("#div1").width();	
				
				//div1
				if(levelScroll>=0 && levelScroll<=200){
				  $("#div1").css("width", "0px");
				  $('#div1').css("margin-left", (-(div1W)/2));
				  $('#div1').css("margin-top", (-(div1W)/2));
				}
				else if(levelScroll>200 && levelScroll<=500){
				  $("#div1").css("width", (levelScroll-200)+"px");
				  $('#div1').css("margin-left", (-(div1W)/2));
				  $('#div1').css("margin-top", (-(div1W)/2));
				  
				}
				else if(levelScroll>500){
				  $("#div1").css("width", "188px");
				  $("#div1").css("margin-left", "-94px");
				  $("#div1").css("margin-top", "-94px");
				}
				
				//circle1
				if(levelScroll>=0 && levelScroll<=350){
				  $("#circle1").css("width", "0px");
				  $('#circle1').css("margin-left", (-(c1w)/2));
				  $('#circle1').css("margin-top", (-(c1w)/2));
				  $("#shaddow1").css("width", "0px");
				  $('#shaddow1').css("margin-left", (-(show1)/2));
				  $('#shaddow1').css("margin-top", (-(show1)/2));
				}
				else if(levelScroll>350 && levelScroll<=650){
				  $("#circle1").css("width", (levelScroll-350)+"px");
				  $('#circle1').css("margin-left", (-(c1w)/2));
				  $('#circle1').css("margin-top", (-(c1w)/2));
				  $("#shaddow1").css("width", (levelScroll-300)+"px");
				  $('#shaddow1').css("margin-left", (-(show1)/2));
				  $('#shaddow1').css("margin-top", (-(show1)/2));
				  
				}
				else if(levelScroll>650){
				  $("#circle1").css("width", "232px");
				  $("#circle1").css("margin-left", "-116px");
				  $("#circle1").css("margin-top", "-116px");
				  $("#shaddow1").css("width", "232px");
				  $("#shaddow1").css("margin-left", "-116px");
				  $("#shaddow1").css("margin-top", "-116px");
				}
				
				
			  });
			  






});

function...