View port Zoom effect

Question

I'm trying to create this view port zoom in effect on the element when clicked and zoom back out when the body is clicked, the problem happens when trying to zoom out because the view port shifted from the zoom in transition.

the goal is to make this view port zoom effect into multiple elements and stack elements inside each other ( more circles appear when one is clicked) and have the same viewport zoom effect

this is the code:

const bodyEl = document.body;
const circle1El = document.querySelector(".circle1");
const circle2El = document.querySelector(".circle2");

circle1El.addEventListener("click", () => {
  const circlePosition = circle1El.getBoundingClientRect();
  const offsetX = window.innerWidth / 2 - circlePosition.x - circlePosition.width / 2;
  const offsetY = window.innerHeight / 2 - circlePosition.y - circlePosition.height / 2;

  bodyEl.style.transform = `scale(2) translate(${offsetX}px, ${offsetY}px)`;
  circle1El.style.opacity = "0"; // Hide circle1 with fade out effect
  circle2El.style.transform = "scale(2)";
  circle2El.style.opacity = "1"; // Show circle2 with fade in effect
});

bodyEl.addEventListener("click", (event) => {
  if (event.target === bodyEl || event.target === circle2El) {
    bodyEl.style.transform = "scale(1)";
    circle1El.style.opacity = "1"; // Show circle1 with fade in effect
    circle2El.style.transform = "scale(0)";
    circle2El.style.opacity = "0"; // Hide circle2 with fade out effect
  }
});

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
  transition: transform 0.5s;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  position: absolute;
  cursor: pointer;
  left: 10%;
  top: 40%;
  z-index: 2;
  opacity: 1;
  transition: transform 0.5s, opacity 0.5s;
}

.circle1 {
  background-color: #ff6347;
}

.circle2 {
  background-color: #4682b4;
  z-index: 1;
  transform: scale(0);
  opacity: 0; 
}

<body>
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
    <script src="script.js"></script>
  </body>

View port Zoom effect

0 Answers0