JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="normalstyle enemy enemy1"></div>
<div class="normalstyle enemy enemy1"></div>
<div class="normalstyle enemy enemy1"></div>
<div class="normalstyle enemy enemy1"></div>
<div class="normalstyle enemy enemy1"></div>
<div class="normalstyle enemy enemy1"></div>
<div class="normalstyle enemy enemy1"></div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  perspective:500px;
}
.enemy{
  width:50px;
  height:50px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-25px;
  margin-top:-25px;
  background-color:#ff0000;
  border-radius:50%;
}

JavaScript

var followers = {

	// first element will become the head of the snake
  
	elements: Array(),
  
  start: function(){
  
  	var cached_this = this;
   
   	$('.enemy1').each(function(){
    
    	cached_this.elements.push({
      
      	element: $(this),
        properties: { x: 0, y: 0, z: 0 }
      
      });
    	
    });
    
    cached_this.render();
    
    requestAnimationFrame(cached_this.render);
   
  },
  
  renderElement: function(index){
  	
    var cached_this = this;
    
    var props = cached_this.elements[index].properties;
   
   element.css('transform','translateX(' + props.x + 'px) translateY(' + props.y + 'px) translateZ(' + props.z + 'px)');
   
  },
  
  render: function(){
  
  	var cached_this = this;
  
  	var last_element = null;
  	
    for(var i=0;i<cached_this.elements.length;i){
    
    	if(!i){
      
      	cached_this.elements[i].properties.x++;
      
      }
    
      cached_this.renderElement(i);
    
    }
  
  }

};

followers.start();