반응형
웹 개발에서 작은 터치도 사용자 경험을 크게 향상시키고 사이트에 독특한 느낌을 줄 수 있습니다. 이러한 터치 중 하나는 커서를 커스터마이징하는 것입니다. 이 튜토리얼에서는 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만으로 웹사이트의 상호작용성과 시각적 매력을 높이는 커스텀 커서를 만들 수 있습니다. 이 간단한 기술은 특정 디자인 요구에 맞게 더욱 커스터마이징하고 확장할 수 있습니다. 우리는 커서 상호작용을 더욱 매력적으로 만들기 위해 물결 효과를 추가했습니다.
이 커스텀 커서를 웹사이트에 구현해 보고 사용자 경험이 어떻게 변하는지 확인해 보세요! 다양한 스타일과 효과를 시도하여 고유한 커서를 만들어 보세요.
반응형
'UX 개발 > UX - 커서 & 클릭 & 키보드' 카테고리의 다른 글
| 마우스에 따라 반대로 움직이는 HTML 요소 만들기 (0) | 2024.07.17 |
|---|---|
| 마우스 홀드(클릭 유지) 이벤트로 애니메이션 구현하기 (0) | 2024.07.16 |
