마우스에 따라 반대로 움직이는 HTML 요소 만들기

 

이 블로그 포스트에서는 커스텀 커서와 마우스 움직임에 반응하는 헤더 타이틀을 활용하여 인터랙티브 웹 페이지를 만드는 과정을 안내합니다. 이 효과는 웹 페이지에 시각적 매력을 더하고, 사용자의 관심을 끌기에 좋습니다. HTML, CSS, 그리고 JavaScript를 사용하여 이 기능을 구현할 것입니다.

HTML 구조

먼저, 기본 HTML 구조를 설정합니다. 커스텀 커서와 움직이는 헤더 타이틀이 포함된 섹션을 만듭니다.

<div class="cursor">
  <div class="cursor__default">
    <span class="cursor__default__inner"></span>
  </div>
  <div class="cursor__trace">
    <span class="cursor__trace__inner"></span>
  </div>
</div>
<section class="header hidden-area">
  <h1 class="header__title">
    <div>Move</div>
    <div>Cursor</div>
  </h1>
</section>

CSS 스타일링

다음으로, 요소들을 스타일링합니다. 배경색을 파란색으로 설정하고, 헤더와 커서를 스타일링합니다.

body {
  background-color: blue;
/*   overflow: hidden; */
}

.shown-area {
  display: none;
}

.header {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
  overflow: hidden;
}

.header__title {
  position: absolute;
  top: 0;
  width: 100%;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 7.5rem;
  line-height: 8.625rem;
  color: white;
  text-align: center;
}

JavaScript로 인터랙션 구현

마지막으로, 커서 움직임에 반응하는 헤더 타이틀을 구현하기 위한 JavaScript 코드를 추가합니다.

const header = document.querySelector(".header");

header.addEventListener("mousemove", (e) => {
  const xRelativeToHeader = e.clientX / header.clientWidth;
  const yRelativeToHeader = e.clientY / header.clientHeight;

  document.querySelector(".header__title").style.transform = `translate(${(xRelativeToHeader * -50)}px, ${yRelativeToHeader * -50}px)`;
});

설명

1. HTML 구조 설정: div 요소를 사용하여 커스텀 커서를 만들고, 헤더 섹션에 h1 요소를 추가하여 움직이는 타이틀을 생성합니다.
2. CSS 스타일링: body 배경색을 파란색으로 설정하고, header와 header__title 클래스에 스타일을 적용하여 페이지의 레이아웃과 타이틀의 텍스트 스타일을 지정합니다.
3. JavaScript 인터랙션: 헤더 섹션에 mousemove 이벤트 리스너를 추가하여, 마우스의 위치에 따라 헤더 타이틀이 움직이도록 합니다.
   • 마우스 위치를 헤더의 너비와 높이로 나눈 상대적인 좌표를 계산합니다.
   • header__title 요소의 transform 속성을 사용하여 계산된 좌표를 기반으로 타이틀을 이동시킵니다.

이 코드 조합은 웹 페이지에 동적인 요소를 추가하여, 사용자가 마우스를 움직일 때마다 타이틀이 함께 움직이는 인터랙티브한 사용자 경험을 제공합니다. 이를 통해 웹 페이지의 시각적 매력을 높이고, 사용자와의 상호작용을 증대시킬 수 있습니다.