[js] 브라우저 화면의 중간값을 구하기(중심축을 이용한 애니메이션)

결과

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

 

 구하는 법

clientX, 와, clientY 는 유저가 현재 브라우저 화면을 바라봤을 때 시야에 들어오는 가로축과 세로축 전체를 의미한다.

또한 고정된 값이 아니라 지속적으로 변화된 값을 추적하기 때문에, 유동적이다.

 

또한 innerWidth 와 innerHeight 도 동일하게 유저가 인지 가능한 시야에 보이는 브라우저 내부 창의 총높이과 넓이와 동일하다. 그래서 최대값만 보았을 때 client 값과 inner 값은 서로 동일하다. 다만, 고정적인 값이기 때문에 브라우저를 새로고침하지 않는 이상 변화된 값이 브라우저에 반영되지 않는다.

 

이러한 특성을 이용하여,  client 축의 시작점, 중간지점, 끝지점의 위치값과 inner 값의 차이를 이용하면 중간지점을 0으로 고정할 수 있게 된다.

 

inner 값을 2로 나눠주지 않으면  가로축(길이)를 기준으로 본다면, 시작지점은 -800px ,중간값은 -400px, 끝지점의 값은 1600px가 된다.

 JS 작업

window 전역 객체의 clientX,Y에 접근하면 클라이언트에게 보이는 브라우저의 가로축과 세로축을 추적하는 값을 구할 수 있다.

 

각 clientX 와 Y축에 고정된 값인 innerHeight 와 innerWidth 의 중간 값을 빼주면 브라우저의 중간지점을 0으로 설정할 수 있다.

(() => {
  const mX = document.getElementById('X');
  const mY = document.getElementById('Y');
 
  window.addEventListener('mousemove',(e)=>{
    const X = e.clientX - window.innerWidth/2;
    const Y = e.clientY - window.innerHeight/2;
    mX.innerHTML = `${X}px`;
    mY.innerHTML = `${Y}px`;
  })
})();

 

만약 저기서 px 에 - 를 붙이면 어떻게 될까?

아래 코드를 복사해서 코드팬의 js에 붙여넣기 해서 확인해보자

(() => {
  const 표지판 = document.querySelector(".표지판");

  const mX = document.getElementById("X");
  const mY = document.getElementById("Y");

//표지판 움직이는 함수( - 붙임)
 const 표지판움직이기 = (X, Y) => {
    표지판.style.translate = `${-X}px ${-Y}px ${X}px`;
  };

//xy 좌표 표지판에 그려주는 함수
  const xy축좌표그리는함수 = (X, Y) => {
    mX.innerHTML = `${X}px`;
    mY.innerHTML = `${Y}px`;
  };

 //브라우저 크기에 따른 inner 값 재설정
  const resize = () => {
    return { innerWidth, innerHeight };
  };
  
  // 리사이즈 및 마우스무브 리스너
  window.addEventListener("resize", resize);
  window.addEventListener("mousemove", (e) => {
    const X = e.clientX - resize().innerWidth / 2;
    const Y = e.clientY - resize().innerHeight / 2;
    console.log(X, Y);

    xy축좌표그리는함수(X, Y);
    표지판움직이기(X, Y);
  });
})();