이번시간에는 [JavaScript] 를 사용해 마우스를 따라다니는 원을 만들어보겠습니다.
스틱코드를 즐겨찾기해주세요.
https://stickode.com/detail.html?no=2671
스틱코드
stickode.com
Html안에 javascript와 css를 구현해주었습니다.
< 전체코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마우스를 따라다니는 원 예제입니다.</title>
<style>
* {
margin: 0;
}
body { // 화면배경컬러
background-color: #7973d6;
}
.circle { // 마우스를 따라다니는 원 설정
position: absolute;
top: 0; // 초기 위치값을 설정해줍니다.
left: 0; // 초기 위치값을 설정해줍니다.
width: 150px; //원 가로사이즈
height: 150px; //원 세로사이즈
border-radius: 50%; // 원의 형태설정
background-color: #9bf50b; //원 컬러설정
transform: translate(-50%, -50%); // 원을 정가운데로 맞추기위해서 축을-50%이동해줍니다.
}
</style>
</head>
<body>
<div class="circle"></div>
<script>
const circle = document.querySelector(".circle");
document.addEventListener("mousemove", (e) => { // mousemove이벤트를 이용해 움
// 마우스의 좌표는 clientX와 clientY를 이용해 알수 있다. -> 브라우저 window의 좌표값 위치를 전달한다.
// pageX, pageY와는 다름.
const mouseX = e.clientX;
const mouseY = e.clientY;
circle.style.left = mouseX + 'px';
circle.style.top = mouseY + 'px';
});
</script>
</body>
</html>
< 마우스이벤트와, 마우스 위치값 설정 >
마우스가 원을 따라다니기 위해서는 마우스의 좌표를 알아야합니다.
마우스의 좌표값은 clientX 와 clientY 를 이용해 알 수 있습니다. clientX, clientY는 브라우저
window의 좌표값을 전달합니다.(좌측상단기준) 페이지에서 떨어져있는 좌표값 pageX, pageY와는 다릅니다.
1. 마우스가 움직일때마다의 좌표값은 mousemove event를 사용해 값을 얻어올수 있습니다.
*** 마우스를 사용할때 발생하는 이벤트
| onmouseover | 해당 객체의 영역위에 커서가 진입하는 순간 발생 |
| onmouseout | 해당 영역에서 커서가 빠져나가는 순간 발생 |
| onmousedown | 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생 |
| onmouseup | 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생 |
| onmousemove | 해당 객체의 영역에서 커서가 움직이는 순간 발생 |
참고
https://www.w3schools.com/jsref/obj_mouseevent.asp
2, 원에 마우스의 좌표값을 적용 clientX, clientY를 이용해 구한 마우스의 좌표값을 원의 top, left에 적용해줍니다.
<div class="circle"></div>
<script>
const circle = document.querySelector(".circle");
document.addEventListener("mousemove", (e) => { // mousemove이벤트를 이용해 움
// 마우스의 좌표는 clientX와 clientY를 이용해 알수 있다. -> 브라우저 window의 좌표값 위치를 전달한다.
// pageX, pageY와는 다름.
const mouseX = e.clientX;
const mouseY = e.clientY;
circle.style.left = mouseX + 'px';
circle.style.top = mouseY + 'px';
});
</script>
<원 크기 ,위치 ,컬러 설정 >
3. 원의 위치값과 크기값을 설정해줍니다.
X축과 Y축을 -50%만큼 이동해 마우스의 중앙에 위치시켜줍니다.
.circle { // 마우스를 따라다니는 원 설정
position: absolute;
top: 0; // 초기 위치값을 설정해줍니다.
left: 0; // 초기 위치값을 설정해줍니다.
width: 150px; //원 사이즈
height: 150px; //원 사이즈
border-radius: 50%; // 원의 형태설정
background-color: #9bf50b; //원 컬러설정
transform: translate(-50%, -50%); // 원을 정가운데로 맞추기위해서 축을-50%이동해줍니다.
}
간단하게 마우스를 따라다니는 원을 만들어 보았습니다.
원을 다른 모양이나, 직접만든 이미지로 바꿔서 적용해보세요.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 국가별 시간 띄우기 (0) | 2022.03.03 |
|---|---|
| [JavaScript]화면 스크롤시 이미지 회전시키기 (0) | 2022.01.03 |
| [JavaScript] fetch api를 사용해서 ajax 통신하기 (1) | 2021.12.22 |
| [JavaScript] js 로 html 에 element 생성 (0) | 2021.12.16 |
| [JavaScript] hash 암호화 (0) | 2021.12.10 |
