본문 바로가기
UX 개발/UX - 커서 & 클릭 & 키보드

HTML, CSS, JavaScript로 커서를 간단히 커스터마이징하기

반응형

 

 

웹 개발에서 작은 터치도 사용자 경험을 크게 향상시키고 사이트에 독특한 느낌을 줄 수 있습니다. 이러한 터치 중 하나는 커서를 커스터마이징하는 것입니다. 이 튜토리얼에서는 HTML, CSS 및 JavaScript를 사용하여 기본 커서, 커서 이동을 따라다니는 추적 효과, 클릭 시 물결 효과를 생성하는 간단한 방법을 소개하겠습니다.

1단계: HTML 구조

먼저, 커스텀 커서에 대한 HTML 구조를 정의합니다. 기본 커서와 추적 커서의 두 부분이 있으며, 클릭 시 물결 효과를 위한 컨테이너도 포함되어 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>커스텀 커서</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <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>
  <script src="script.js"></script>
</body>
</html>

2단계: CSS 스타일링

다음으로, 커스텀 커서를 시각적으로 매력적으로 만들기 위해 스타일을 추가합니다. 커서는 흰색 기본 원과 파란색 추적 효과를 가지며, 클릭 시 하늘색 물결 효과를 추가합니다.

/* styles.css */

html, body {
  height: 100%;
  background: black;
}

body {
  cursor: none !important;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}

.cursor__default__inner {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
}

.cursor__trace__inner {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: blue;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s;
}

.cursor--active .cursor__trace__inner {
  transform: translate(-50%, -50%) scale(10);
  transition: transform 0.3s;
}

.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  background: skyblue;
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 0.5s ease forwards;
}

@keyframes ripple {
  to {
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    opacity: 0;
  }
}

3단계: 상호작용을 위한 JavaScript

마지막으로, 커서의 이동, 클릭 효과 및 물결 효과를 처리하는 JavaScript를 추가합니다. 이 스크립트는 마우스의 위치에 따라 커스텀 커서 요소의 위치를 업데이트하고, 마우스를 클릭할 때 확장 효과를 추가합니다.

// script.js

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('mousemove', function(event) {
    const cursorDefaultInner = document.querySelector('.cursor__default__inner');
    const cursorTraceInner = document.querySelector('.cursor__trace__inner');

    cursorDefaultInner.style.left = event.clientX + 'px';
    cursorDefaultInner.style.top = event.clientY + 'px';

    cursorTraceInner.style.left = event.clientX + 'px';
    cursorTraceInner.style.top = event.clientY + 'px';
  });

  const cursor = document.querySelector('.cursor');

  document.addEventListener('mousedown', function() {
    cursor.classList.add('cursor--active');
  });

  document.addEventListener('mouseup', function() {
    cursor.classList.remove('cursor--active');
  });

  function createRipple(e) {
    let ripple = document.createElement('div');
    ripple.classList.add('ripple');
    cursor.appendChild(ripple);

    ripple.style.top = (e.clientY - ripple.clientHeight / 2) + 'px';
    ripple.style.left = (e.clientX - ripple.clientWidth / 2) + 'px';

    ripple.addEventListener('animationend', () => {
      ripple.remove();
    });
  }

  document.addEventListener('click', function(e) {
    createRipple(e);
  });
});

결론

몇 줄의 HTML, CSS 및 JavaScript만으로 웹사이트의 상호작용성과 시각적 매력을 높이는 커스텀 커서를 만들 수 있습니다. 이 간단한 기술은 특정 디자인 요구에 맞게 더욱 커스터마이징하고 확장할 수 있습니다. 우리는 커서 상호작용을 더욱 매력적으로 만들기 위해 물결 효과를 추가했습니다.

이 커스텀 커서를 웹사이트에 구현해 보고 사용자 경험이 어떻게 변하는지 확인해 보세요! 다양한 스타일과 효과를 시도하여 고유한 커서를 만들어 보세요.

반응형
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝