JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div id="center">
  <div class="text">
    <h3>Picture of</h3>
    <h4>Blues</h4> 
  </div>
  <div class="text">
    <h3>Picture of</h3>
    <h4>Reds</h4> 
  </div>
    <div class="text">
    <h3>Picture of</h3>
    <h4>Browns</h4> 
  </div>
  <div class="text">
    <h3>Picture of</h3>
    <h4>Greens</h4> 
  </div>
</div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>
<div id="sat5"></div>
<div id="sat6"></div>
<div id="sat7"></div>

CSS

div:not(.text) {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    text-align: center;
    border-style:dashed;
}
#center h3 {
  margin-top: 70px;
}
#sat0, #sat1, #sat2, #sat3, #sat4, #sat5, #sat6, #sat7 {
    width:50px;
    height:50px;
    
}

#sat0 {
  background-image: url('http://via.placeholder.com/350/D0021B/000000');
}
#sat1 {
  background-image: url('http://via.placeholder.com/350/4A90E2/000000');
}
#sat2 {
 background-image: url('http://via.placeholder.com/350/417505/000000');
}
#sat3 {
 background-image: url('http://via.placeholder.com/350/8B572A/000000');
}
#sat4 {
  background-image: url('http://via.placeholder.com/350/710714/000000');
}
#sat5 {
  background-image: url('http://via.placeholder.com/350/1A4271/2B5A90');
}
#sat6 {
 background-image: url('http://via.placeholder.com/350/B8E986/000000');
}
#sat7 {
 background-image: url('http://via.placeholder.com/350/413021/000000'); 
}

.text:not(:first-child){
  display: none;
}

div[data-angle="45"], div[data-angle="225"] {
  border: 5px solid green;
}

JavaScript

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 8,
    deg2rad = Math.PI / 180,
    i = 0;

for(;i < 8; i++) {
    angles.push(angle);
    angle += spc;
}
/// space out radius
radius += (radiusSat - 25);

init();

function init() {
    for(var i = 0; i < angles.length; i++) {
       var  angle = angles[i];        
       x = cx + radius * Math.cos(angle * deg2rad);
       y = cy + radius * Math.sin(angle * deg2rad);
       $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat}); 
       angles[i] = angles[i] + 1;
    }
    setTimeout(function(){
      loop();
    }, 1000)
}

function loop() {
    //consider this as steps of animation
    if(angles[0] ==45) {
    	 pause(1500, 1); 
    } else if(angles[0] ==90) {
    	 pause(1500, 2); 
    }else if(angles[0] ==135) {
      pause(1500, 3); 
    }else if(angles[0] ==180) {
      pause(1500, 0);
    }else if(angles[0] ==225) {
      pause(1500, 1); 
    }else if(angles[0] ==270) {
      pause(1500, 2);
    }else if(angles[0] ==315) {
      pause(1500, 3);
    }else if(angles[0] ==0) {
      pause(1500, 0);
    }else {
    		requestAnimationFrame(loop);
    }   
 			for(var i = 0; i < angles.length; i++) {
        var angle = angles[i];        
        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);
        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});
        $('#sat' + i).attr('data-angle', angle);
        angles[i] = angles[i] + 1;
        if(angles[i] == 360) angles[i] =0;       
    }

}

function pause(time, id){	
	$(".text").hide();
  $(".text:eq("+id+")").show();  
	setTimeout(function(){
  	requestAnimationFrame(loop);
  }, time);	
}