JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="obj">

</div>

CSS

#obj {
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 90vh;
}

JavaScript

var d = 10; // der Durchmesser des Objektes
var v = 10; // die Anfangsgeschwindkeit
var y = window.innerHeight - d; // die Anfangsposition
var b = 0.1; // die Beschleunigung
var vobj = document.getElementById('obj');
function moveit() {
  vobj.style.top = y + 'px'; // vertikale Position setzen
  y -=  v; // die vertikale Position ändert sich
           // proportional zur Geschwindigkeit
  v -= b;  // die Beschleunigung ist proportional
           // zur Gravitation und
           // die Geschwindigkeit ändert sich
           // proportional zur Beschleunigung
  if (y  > window.innerHeight - d) {
    v = -v * 0.98;
    y = window.innerHeight - d;
  }
  window.requestAnimationFrame(moveit);
}
moveit();