[Javascript] 마우스 따라 움직이는 ui

위와 같이 마우스의 움직임에 따라 전체적인 페이지가 같이 움직이는 ui를 만들어보았다. 

 

HTML

  <div class="section">

    <div class="inner">

      <div class="rows">

        <div class="link"></div>

        <div class="link"></div>

        <div class="link"></div>

        <div class="link"></div>

      </div>

      <div class="rows">

        <div class="link"></div>

        <div class="link"></div>

        <div class="link"></div>

        <div class="link"></div>

      </div>

      <div class="rows">

        <div class="link"></div>

        <div class="link"></div>

        <div class="link"></div>

        <div class="link"></div>

      </div>

    </div>

  </div>

 

CSS

* {

  overflow: hidden;

  margin: 0;

  padding: 0;

}

html,body{

  background-color: #333;

}

.section {

  width: 100vw;

  height: 100vh;

}

.inner {

  position: absolute;

  background-color: #333;

  height: 2560px;

}

.rows {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

}

.link {

  width: 400px;

  height: 600px;

  background-color: #ddd;

  margin: 120px;

}

 

전체를 감싸는 section은 화면에 딱 맞게 100vw, 100vh로 맞춰두고, 그 안에 inner는 모든 요소가 다 담기게 크게 설정해두고 overflow:hidden으로 넘치는 부분은 안보이게 설정해두었다. 그리고 position: absolute로 left값과 top값을 조정할 계획이다.

 

JAVASCRIPT

window.addEventListener('mousemove', (e) => {

  let mouseX = -0.3288 * e.clientX;

  let mouseY = -1.7122 * e.clientY;

  document.querySelector('.inner').style.top = `${mouseY}px`;

  document.querySelector('.inner').style.left = `${mouseX}px`

});

자바스크립트는 많이 간단하다. x좌표값이 0일때 left값도 0, 화면의 끝좌표일 때 left값은 inner의 x좌표 끝값에 도달하게 일차방정식을 구해주고, y좌표값도 마찬가지다.

mousemove 이벤트리스너로 일차방정식에 따라 마우스 움직임을 감지해 left값과 top값을 조절해주었다.

 

처음에 clientX,Y 값이 아닌 offsetX,Y값으로 했는데 계속 값이 튀면서 자연스럽게 움직이지 않았다. mouse 좌표값을 구하는 코드는 몇 개 있기 때문에 clientX,Y로 바꿔보니 자연스럽게 움직였다. 왜 offset값으로는 제대로 작동하지 않는걸까.. 아시는 분? 좌표값이 튀는 오류를 못잡아서 한참 애를 먹었다.

 

위와 같은 ui는 아마 평소엔 쓸 일이 없겠지만 포트폴리오 사이트에 적용시키면 꽤 재밌는 페이지를 만들 수 있지 않을까 생각이 든다.