안녕하세요. 오늘은 mousemove 이벤트를 사용해서 마우스 효과를 주는 방법을 알아보겠습니다. mousemove 이벤트는 이름 그대로 마우스(포인팅)이 움직일 때 발생하는 이벤트입니다.
아래와 같은 방법으로 이벤트를 사용할 수 있습니다.
addEventListener("mousemove", (event) => { ~ });
onmousemove = (event) => { ~ };
mousemove 이벤트 객체에서 사용할 수 있는 내용들은 아래와 같습니다.
1. (스크롤 무시하고 브라우저 상단을 0으로 측정, 스크롤해도 값 동일 : 클라이언트 좌표)
event.x 또는 event.clienX : 현재 보이는 화면 영역 내 마우스 x 좌표 값을 가져옴.
event.y 또는 event.clientY: 현재 보이는 화면 영역 내 마우스의 y 좌표 값을 가져옴.
2. (스크롤 인식, 전체문서 기준 : 페이지 좌표)
event.pageX: 전체 브라우저 화면 내에서의 x 좌표 값을 가져옴.
event.pageY: 전체 브라우저 화면 내에서의 y 좌표 값을 가져옴.
3. (스크롤 인식, 전체문서 기준. 이벤트가 발생한 객체 기준으로 좌표 출력)
event.offsetX: 이벤트 대상에서의 상대적 x 좌표값을 가져옴.
event.offsetY: 이벤트 대상에서의 상대적 y 좌표값을 가져옴.
4. (모니터 화면 기준 - 브라우저 움직여도 값 동일)
event.screenX: 전체 모니터 화면에서의 x 좌표 값을 가져옴.
event.screenY: 전체 모니터 화면에서의 y 좌표 값을 가져옴.
5. (지난 mousemove 이벤트 위치 기준)
event.movementX: 지난 mousemove 이벤트와 비교해 얼마나 x축으로 마우스가 움직였는지 표시
event.movementY: 지난 mousemove 이벤트와 비교해 얼마나 y축으로 마우스가 움직였는지 표시
6. shift, alt, ctrl, meta 프로퍼티.
event.altKey: 마우스가 움직일 때 alt키가 눌려있으면 true를 반환
event.ctrlKey : 마우스가 움직일 때 ctrl키가 눌려있으면 true를 반환.
event.shiftKey : 마우스가 움직일 때 shift키가 눌려있으면 true를 반환.
event.metaKey: 마우스가 움직일 때 meta키가 눌려있으면 true를 반환(MacOS에서 Cmd키)
7. 이외 button,buttons,layerX,layerY 등등(아래 링크에서 상세내용 참고)
오늘은 이 중에서 브라우저 화면 내에서 왼쪽으로부터, 그리고 또 위에서 부터 얼마나 떨어져있는지를 기준으로해서 (가장왼쪽 최상단이 0,0) 좌표를 제공하는 clientX,clientY를 사용해보겠습니다. 완성되면 아래와 같은 모습을 볼 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
margin: 0;
padding: 0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
cursor:pointer;
/*전체 화면에서 포인터 적용*/
}
.cursor1{
position:fixed;
left:0;
top:0;
pointer-events:none;/*요소가 포인터 이벤트의 대상이 되지 않는다.*/
width:50px;
height:50px;
background-color: #E07D9B;
opacity: .3;
border:1px solid #E07D9B;
border-radius:50%;
transform: translate(-50%,-50%);
}
.cursor2{
position:fixed;
left:0;
top:0;
pointer-events:none;
width: 8px;
height: 8px;
background-color: #E07D9B;
border-radius:50%;
transform: translate(-50%,-50%);
}
/*마우스가 글자 위로 올라갈 때 발생하는 이벤트*/
.content:hover ~ .cursor1 {
transform:translate(-50%,-50%) scale(1.5);
background-color:transparent;
}
</style>
<title>마우스</title>
</head>
<body>
<div class="content">
<h1>마우스 따라다니는 효과</h1>
<p>
오늘은 js를 사용해서 마우스 효과 주는 방법을 알아보겠습니다.
<br>
이 화면에서 보이는 마우스 효과는 총 두개로, 마우스가 글자 위로 올라갔을 때와 올라가지 않았을 때로 나뉩니다.
</p>
</div>
<div class="cursor1"><div>
<div class="cursor2"><div>
<script>
//커서 엘레멘트를 가져온다.
const cursor1 = document.querySelector(".cursor1");
//addEventListener를 사용해서 mousemove 이벤트 추가.
document.addEventListener("mousemove",(e) => {
var x = e.clientX; //x축값
var y = e.clientY; //y축값
cursor1.style.cssText = "left:"+x+"px;"+"top:"+y+"px;";//위치를 style로 적용한다.
});
</script>
</body>
</html>
+자세한 내용은 아래 링크 참고바랍니다.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
Element: mousemove event - Web APIs | MDN
The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
EventTarget.addEventListener() - Web APIs | MDN
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
developer.mozilla.org
https://ko.javascript.info/mouse-events-basics
마우스 이벤트
ko.javascript.info
'JavaScript' 카테고리의 다른 글
| [JavaScript]i18next을 활용한 언어 변환 처리 (0) | 2023.04.08 |
|---|---|
| [JavaScript] 입력한 내용을 텍스트 파일에 저장하기 (0) | 2023.04.07 |
| [JavaScript] clipboard api를 사용해서 클립보드에 특정 텍스트를 복사하는 방법 (0) | 2023.04.03 |
| [JavaScript] client에서 쿠키 생성, 수정, 삭제하는 방법 (0) | 2023.04.02 |
| [JavaScript] 마우스 드래그로 일괄 선택하기 (0) | 2023.03.31 |