JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

JavaScript

// задаваемые параметры
var gA = 320;    // длина большой (горизонтальной) полуоси эллипса в пикселях
var gB = 50;     // длина малой (вертикальной) полуоси эллипса в пикселях
 
var gMin = 20;   // длина стороны квадрата на заднем плане в пикселях (минимальная)
var gMax = 70;   // длина стороны квадрата на переднем плане в пикселях (максимальная)
 
var gFPS = 100;  // скорость перемещения квадрата (кадров в секунду)
 
var gOrb = true; // нарисовать ли орбиту движения? (false - не рисовать)
///////////////////////
 
onload = function ()
{
gStart = 0;
gDelta = (gMax - gMin) / Math.PI;
gX = 2 * gA + gMax;
gY = gB + gMax;
 
var codeSquare  = '<div id="myDV" style="position: absolute; background: #000; ';
    codeSquare += 'width: ' + gMin + 'px; height: ' + gMin + 'px; left: ';
    codeSquare += (gX - gA) + 'px; top: ' + (gY - gB) + 'px; overflow: hidden">';
document.body.innerHTML += codeSquare;
move ();
}
 
function move ()
{
if (self.gTRM) clearTimeout (gTMR);
if (gStart > 2 * Math.PI) gStart = -0.01, gOrb = false;
gStart += 0.01;
 
var obj = document.getElementById ('myDV');
var le = gX + gA * Math.cos (gStart + 3 / 2 * Math.PI);
var to = gY + gB * Math.sin (gStart + 3 / 2 * Math.PI);
obj.style.left = le + 'px';
obj.style.top  = to + 'px';
 
var size = (gStart <= Math.PI) ? Math.max (parseInt (gMin + gDelta * gStart),
                                           parseInt (obj.style.width))
                               : Math.min (parseInt (gMax - gDelta * (gStart - Math.PI)),
                                           parseInt (obj.style.width));
obj.style.width = obj.style.height = size + 'px';
 
if (gOrb)
   {
   var codeOrbit  = '<div style="position: absolute; background: red; ';
       codeOrbit += 'width: 1px; height: 1px; left: ' + le + 'px; top: ';
       codeOrbit += to + 'px; overflow: hidden">';
   document.body.innerHTML += codeOrbit;
   }  
 
gTMR = setTimeout (move, 1000 / gFPS);
}