PrésentationJS-Aplus

HTML

<html>

  <body>
    <div id="Element">
      HELLO WORLD!
    </div>
  </body>

</html>

CSS

body {
  background-color: yellow;
}

#Element {
  position: absolute;
  top: 50px;
  left: 50px;
}

JavaScript

const elem = document.getElementById("Element");
const rect = elem.getBoundingClientRect();

let posX = rect.left;
let posY = rect.top;
let deltaX = 1;
let deltaY = 1;

const interval = setInterval(frame, 5);

function frame() {
  if (posX <= 0 || posX >= document.body.offsetWidth) {
    deltaX = -deltaX;
  }
  if (posY <= 0 || posY >= document.body.offsetHeight) {
  	deltaY = -deltaY;
  }
  posX += deltaX; 
  posY += deltaY;
  elem.style.left = posX + 'px'; 
  elem.style.top = posY + 'px'; 
}