Code Playground

console.log("Event Fired")
// Randomly move an element contrained within the viewport

const movingElement = document.getElementById("sammieBubble");
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const elementWidth = movingElement.offsetWidth;
const elementHeight = movingElement.offsetHeight;

function getRandomPosition() {
  const x = Math.random() * (viewportWidth - elementWidth);
  const y = Math.random() * (viewportHeight - elementHeight);
  return { x, y };
}

function moveElement() {
  const newPosition = getRandomPosition();
  const currentX = parseFloat(movingElement.style.left || 0);
  const currentY = parseFloat(movingElement.style.top || 0);
  const dx = newPosition.x - currentX;
  const dy = newPosition.y - currentY;
  const duration = 2000; // milliseconds

window.requestAnimationFrame(step);
}

function moveAndConstrain() {
  moveElement();
  constrainElement();
}

// Initial movement and constraint
moveAndConstrain();

// Update position every 3 seconds
setInterval(moveAndConstrain, 3000);

// refresh window on resize 
// needed to recalculate viewport dimensions
window.addEventListener('resize', function() {
    location.reload();
});

Frontend Forever App