바닐라 자바스크립트로 이미지 확대기를 만드는 방법

 :root {
  --magnifier-width: 150;
  --magnifier-height: 150;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 400px;
  height: 300px;
  background-size: cover;
  background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-_1280.jpg");
  background-repeat: no-repeat;
  position: relative;
  cursor: none;
}

.magnifier {
  border-radius: 400px;
  box-shadow: 0px 11px 8px 0px #a;
  position: absolute;
  width: calc(var(--magnifier-width) * 1px);
  height: calc(var(--magnifier-height) * 1px);
  cursor: none;
  background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-_1280.jpg");
  background-repeat: no-repeat;
}

span {
  display: block;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hidden {
  visibility: hidden;
}

div > span:nth-child(3) {
  font-size: 20px;
}
 

main.js 파일에서 document.querySelector 메서드를 사용하여 앞서 언급한 HTML 요소를 검색한 후 클래스 지정에 따라 각 변수, 돋보기 및 컨테이너에 할당합니다.

돋보기 요소의 치수를 `getComputedStyle` 함수를 사용하여 가로와 세로 길이를 문자열로 가져옵니다. 그런 다음 `substring` 및 `indexOf` 메서드를 사용하여 이 문자열에서 숫자 값을 추출합니다.

추출된 돋보기의 치수를 각각 magnifierWidth와 magnifierHeight 변수에 할당해 보겠습니다.

 let magnifier = document.querySelector(".magnifier");
let container = document.querySelector(".container");

let magnifierWidth = getComputedStyle(magnifier).width.substring(
   0,
   getComputedStyle(magnifier).width.indexOf("p")
);

let magnifierHeight = getComputedStyle(magnifier).width.substring(
   0,
   getComputedStyle(magnifier).height.indexOf("p")
); 

줌 레벨, 최대 줌 레벨, 커서 및 돋보기 시각적 표현의 위치에 대한 매개 변수를 설정합니다.

 let zoomLevelLabel = document.querySelector(".zoom-level");
let zoom = 2;
let maxZoomLevel = 5;
let pointerX;
let pointerY;
let magnifyX;
let magnifyY;
 

앞서 언급한 코드 블록에는 각각 X축과 Y축에 대한 좌표 평면에서 커서의 현재 위치를 나타내는 데 사용되는 두 개의 변수, 즉 pointerX 및 pointerY가 표시됩니다.

 function getZoomLevel() {
  return zoom;
}

function getPointerPosition() {
  return { x: pointerX, y: pointerY }
}
 

화면에서 확대된 관심 영역에 대한 정보를 최신 상태로 유지하기 위해 ‘updateMagImage’라는 필수 유틸리티를 구현했습니다. 이 함수는 마우스 포인터의 현재 위치를 고려하여 새로운 `MouseEvent` 객체를 세심하게 생성한 다음 이를 포함하는 컨테이너 요소로 효율적으로 전송합니다. 이 작업의 주요 목적은 지정된 영역에 대한 돋보기의 시각적 표현을 가능한 한 신속하게 수정하는 것입니다.

 function updateMagImage() {
  let evt = new MouseEvent("mousemove", {
    clientX: getPointerPosition().x,
    clientY: getPointerPosition().y,
    bubbles: true,
    cancelable: true,
    view: window,
  });

  container.dispatchEvent(evt);
}
 

“키업” 경우에 대한 이벤트 리스너를 창 개체에 통합하여 사용자가 “ArrowUp” 또는 “ArrowDown” 키를 누를 때 배율을 수정해야 합니다.

키업 이벤트 콜백 함수는 입력 데이터를 처리하는 기본 역할 외에도 확대/축소 수준과 관련된 레이블을 업데이트하고 확대된 이미지를 업데이트하는 프로세스를 시작하는 추가 책임이 있습니다.

 window.addEventListener("keyup", (e) => {
  if (e.key === "ArrowUp" && maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) {
    zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
    zoom = zoom + 0.3;
    updateMagImage();
  }

  if (e.key === "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) {
    zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
    zoom = zoom - 0.3;
    updateMagImage();
  }
});
 

다음 코드는 컨테이너 요소에 마우스 이동 이벤트 리스너를 추가하여 커서가 그 위로 이동하면 이를 감지하고 이에 대한 응답으로 일부 작업을 수행합니다.

콜백 함수에서 돋보기 요소에서 “숨김” 속성을 취소하여 식별 가능하도록 렌더링하고 페이지의 스크롤 위치를 고려하여 컨테이너와 관련된 마우스 좌표를 계산하는 메커니즘을 통합합니다.

이 함수는 확대/축소 수준 및 마우스 위치에 따라 돋보기 이미지의 크기와 위치를 결정하는 것 외에도 돋보기의 변환 스타일을 계산된 배치에 맞게 조정해야 합니다.

 container.addEventListener("mousemove", (e) => {
  magnifier.classList.remove("hidden");
  let rect = container.getBoundingClientRect();
  let x = e.pageX - rect.left;
  let y = e.pageY - rect.top;

  x = x - window.scrollX;
  y = y - window.scrollY;

  magnifier.style.transform = `translate(${x}px, ${y}px)`;
  const imgWidth = 400;
  const imgHeight = 300;

  magnifier.style.backgroundSize =
    imgWidth * getZoomLevel() + "px " + imgHeight * getZoomLevel() + "px";

  magnifyX = x * getZoomLevel() + 15;
  magnifyY = y * getZoomLevel() + 15;

  magnifier.style.backgroundPosition = -magnifyX + "px " + -magnifyY + "px";
});
 

“마우스아웃” 상황을 감지하는 컨테이너 요소에 추가 이벤트 리스너가 추가되어 커서가 컨테이너 영역에서 멀어질 때 “숨겨진” 클래스가 돋보기 요소에 추가됩니다.

 container.addEventListener("mouseout", () => {
  magnifier.classList.add("hidden");
});
 

마지막으로 창 객체에 “마우스 이동” 이벤트에 대한 이벤트 리스너를 구현하여 현재 마우스 위치를 x 및 y 좌표 모두에서 업데이트합니다.

 window.addEventListener("mousemove", (e) => {
   pointerX = e.clientX;
   pointerY = e.clientY;
}); 

바닐라 자바스크립트를 사용하여 이미지용 돋보기를 구성하는 과정이 성공적으로 완료되었습니다.

이미지 확대경이 사용자 경험을 개선하는 방법

확대 기능을 활용하면 이미지 내의 특정 영역에 주의를 집중하여 제품과 관련된 미세한 세부 사항에 대한 인식을 향상시킬 수 있습니다.

시각적 검사 범위가 넓어지면 사용자에게 확신을 심어주어 현명한 선택을 할 수 있습니다. 이는 전환율 상승으로 이어지고 고객 유지율을 높일 수 있습니다.