springbapaanimation/index.js

This is a simple demonstration of a spring animation created using JavaScript and CSS.

document.addEventListener("DOMContentLoaded", function() {
  const springElement = document.querySelector(".spring");
  let isAnimating = false;

  springElement.addEventListener("mousedown", startAnimation);
  springElement.addEventListener("mouseup", stopAnimation);

  function startAnimation(event) {
    if (!isAnimating) {
      isAnimating = true;
      document.addEventListener("mousemove", moveSpring);
    }
  }

  function moveSpring(event) {
    const boundingRect = springElement.getBoundingClientRect();
    const offsetX = event.clientX - boundingRect.width / 2;
    const offsetY = event.clientY - boundingRect.height / 2;

    springElement.style.left = offsetX + "px";
    springElement.style.top = offsetY + "px";
  }

  function stopAnimation() {
    if (isAnimating) {
      isAnimating = false;
      document.removeEventListener("mousemove", moveSpring);
    }
  }

  // Additional code for demonstration purposes, not directly related to the main functionality
  function randomizeSpringPosition() {
    const boundingRect = springElement.parentElement.getBoundingClientRect();
    const randomX = Math.random() * boundingRect.width;
    const randomY = Math.random() * boundingRect.height;

    springElement.style.left = randomX + "px";
    springElement.style.top = randomY + "px";
  }

  function changeSpringColor() {
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
    springElement.style.backgroundColor = randomColor;
  }

  setInterval(randomizeSpringPosition, 3000);
  setInterval(changeSpringColor, 2000);
});

document.addEventListener("DOMContentLoaded", function() {
  const balloonElement = document.querySelector(".balloon");
  let isFloating = false;

  balloonElement.addEventListener("mousedown", startFloating);
  balloonElement.addEventListener("mouseup", stopFloating);

  function startFloating(event) {
    if (!isFloating) {
      isFloating = true;
      document.addEventListener("mousemove", floatBalloon);
    }
  }

  function floatBalloon(event) {
    const boundingRect = balloonElement.getBoundingClientRect();
    const offsetX = event.clientX - boundingRect.width / 2;
    const offsetY = event.clientY - boundingRect.height / 2;

    balloonElement.style.left = offsetX + "px";
    balloonElement.style.top = offsetY + "px";
  }

  function stopFloating() {
    if (isFloating) {
      isFloating = false;
      document.removeEventListener("mousemove", floatBalloon);
    }
  }

  // Additional code for demonstration purposes, not directly related to the main functionality
  function burstBalloon() {
    balloonElement.style.display = "none";
    setTimeout(() => {
      balloonElement.style.display = "block";
    }, 2000);
  }

  function changeBalloonColor() {
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
    balloonElement.style.backgroundColor = randomColor;
  }

  setInterval(burstBalloon, 5000);
  setInterval(changeBalloonColor, 3000);
});

document.addEventListener("DOMContentLoaded", function() {
  const cloudElement = document.querySelector(".cloud");
  let isMoving = false;

  cloudElement.addEventListener("mousedown", startMoving);
  cloudElement.addEventListener("mouseup", stopMoving);

  function startMoving(event) {
    if (!isMoving) {
      isMoving = true;
      document.addEventListener("mousemove", moveCloud);
    }
  }

  function moveCloud(event) {
    const boundingRect = cloudElement.getBoundingClientRect();
    const offsetX = event.clientX - boundingRect.width / 2;
    const offsetY = event.clientY - boundingRect.height / 2;

    cloudElement.style.left = offsetX + "px";
    cloudElement.style.top = offsetY + "px";
  }

  function stopMoving() {
    if (isMoving) {
      isMoving = false;
      document.removeEventListener("mousemove", moveCloud);
    }
  }

  // Additional code for demonstration purposes, not directly related to the main functionality
  function dissipateCloud() {
    cloudElement.style.opacity = "0";
    setTimeout(() => {
      cloudElement.style.opacity = "1";
    }, 4000);
  }

  function changeCloudColor() {
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
    cloudElement.style.backgroundColor = randomColor;
  }

  setInterval(dissipateCloud, 6000);
  setInterval(changeCloudColor, 4000);
});

document.addEventListener("DOMContentLoaded", function() {
  const treeElement = document.querySelector(".tree");
  let isSwinging = false;

  treeElement.addEventListener("mousedown", startSwinging);
  treeElement.addEventListener("mouseup", stopSwinging);

  function startSwinging(event) {
    if (!isSwinging) {
      isSwinging = true;
      document.addEventListener("mousemove", swingTree);
    }
  }

  function swingTree(event) {
    const boundingRect = treeElement.getBoundingClientRect();
    const offsetX = event.clientX - boundingRect.width / 2;
    const offsetY = event.clientY - boundingRect.height / 2;

    treeElement.style.left = offsetX + "px";
    treeElement.style.top = offsetY + "px";
  }

  function stopSwinging() {
    if (isSwinging) {
      isSwinging = false;
      document.removeEventListener("mousemove", swingTree);
    }
  }

  // Additional code for demonstration purposes, not directly related to the main functionality
  function growTree() {
    const currentHeight = parseInt(treeElement.style.height) || 100;
    treeElement.style.height = (currentHeight + 10) + "px";
  }

  function changeTreeColor() {
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
    treeElement.style.backgroundColor = randomColor;
  }

  setInterval(growTree, 2000);
  setInterval(changeTreeColor, 3000);
});