JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="stage">
  <div class="sun"></div>
</div>
<div class="cockpit">
  <div class="cockpit-light-left"></div>
  <div class="cockpit-light-top"></div>
  <div class="cockpit-light-right"></div>
  <div class="cockpit-light-bottom"></div>
</div>

CSS

body{
  background-color:#000;
}
.stage{
  perspective:500px;
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
}
.stage .sun{
  background-image:url(http://www.pngall.com/wp-content/uploads/2016/07/Sun-PNG-HD.png);
  width:547px;
  height:548px;
  position:absolute;
  margin-top:-274px;
  margin-left:-274px;
  top:50%;
  left:50%;
  cursor:move;
  transform:translateZ(-100px);
}
.cockpit{
  background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit.png);
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:fixed;
  pointer-events:none;
}
.cockpit>div{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:absolute;
  opacity:0;
  transition:all 0s;
}
.cockpit .cockpit-light-left{
  background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-left.png);
}
.cockpit .cockpit-light-top{
  background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-top.png);
}
.cockpit .cockpit-light-right{
  background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-right.png);
}
.cockpit .cockpit-light-bottom{
  background-image:url(https://aninoob.com/particles/assets/cockpit/cockpit-light-bottom.png);
}

JavaScript

var cockpit = {

	lightingdegree: .5
	,
	init: function(){
  
  	cockpit.pit = $('.cockpit');
    cockpit.light = $('.sun');
    
    cockpit.width = cockpit.pit.width();
    cockpit.height = cockpit.pit.height();
    
  	cockpit.light_west = $('.cockpit .cockpit-light-left');
  	cockpit.light_north = $('.cockpit .cockpit-light-top');
  	cockpit.light_east = $('.cockpit .cockpit-light-right');
  	cockpit.light_south = $('.cockpit .cockpit-light-bottom');
    
    $(document).mousemove(function(evt){
    
    	var x = evt.pageX - cockpit.pit.offset().left;
			var y = evt.pageY - cockpit.pit.offset().top;
      
      cockpit.render_lighting(x,y);
    
    });
    
    
    
  	$('.sun').draggable({ update: function(evt){
    
    	var x = evt.pageX - cockpit.pit.offset().left;
			var y = evt.pageY - cockpit.pit.offset().top;
      
      cockpit.render_lighting(x,y);
    
    }})
  	
  
  },
  render_lighting: function(x,y,time){
  
    if(time){

			$('.cockpit>div').css('transition','all ' + time + 'ms');
      cockpit.light.css('transition','all ' + time + 'ms');
      
      var t = 20;
      
    } else {
    
    	var t = 1;
    
    }
  
  	setTimeout(function(){
    
     
      var radiusx = (cockpit.width/2);
      var radiusy = (cockpit.height/2);

      var gridx = x - radiusx;
      var gridy = y - radiusy;
			
      //cockpit.light.css('transform','translateX(' + gridx + 'px) translateY(' + gridy + 'px)');
     
      // generate the lighting based on position relative to element

      var e = ((x - radiusx)/radiusx)*cockpit.lightingdegree;

      if(gridx < 0){

        var w = Math.abs((x - radiusx)/radiusx)*cockpit.lightingdegree;

      } else {

        var w = 0;

      }

      var s = ((y - radiusy)/radiusy)*cockpit.lightingdegree;

      if(gridy < 0){

        var n = Math.abs((y - radiusy)/radiusy)*cockpit.lightingdegree;

      } else {

        var n = 0;

      }



      // now we will get a + or - integer with the center of element...