// random range
const randomRange = (min, max) => {
	return Math.random() * (max - min) + min;
};

const width = window.innerWidth;
const height = window.innerHeight;

const bouncingDivs = document.querySelectorAll(".bouncing_div");

bouncingDivs.forEach(function(item) {
  // position
  let posX = randomRange(0, width * 0.75);
  let posY = randomRange(0, height * 0.75)
  // speed
  let speedX = randomRange(-0.75, 0.75);
  let speedY = randomRange(-0.5, 0.5);
  // animation
  function movePositions() {
    posX += speedX;
	  posY += speedY;
    item.style.left = posX + "px";
	  item.style.top = posY + "px";
    requestAnimationFrame(movePositions);
    // loop
    if(posX > width - 300) {
      speedX = speedX * -1;
    }
    if(posX < 0) {
      speedX = speedX * -1;
    }
    if(posY > height - 300) {
      speedY = speedY * -1;
    }
    if(posY < 0) {
      speedY = speedY * -1;
    }
  }
  movePositions();
});