728x90
[HTML소스포함]
JavaScript으로 만든
마우스따라 움직이는 눈동자
![[HTML소스포함]_마우스따라_움직이는_눈동자,_JavaScript_예제](https://blog.kakaocdn.net/dn/bhBnfG/btsBYcxenIK/UY8QCyNZkSK80ta3rEeyT0/img.png)
눈동자가 마우스를 따라 움직임
See the Pen 눈동자 by Yami LEE (@Yami-LEE) on CodePen.
코드블럭 ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>눈동자</title>
<style>
/* 스타일링 */
.eye {
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.pupil {
width: 25px;
height: 25px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- 눈 요소 -->
<div class="eye" id="eye">
<!-- 눈동자 요소 -->
<div class="pupil"></div>
</div>
<!-- 자바스크립트 코드 -->
<script>
// 눈 요소 가져오기
const eye = document.getElementById('eye');
// 마우스 이동 이벤트 리스너 등록
document.addEventListener('mousemove', (e) => {
// 마우스 위치 정보 가져오기
const { clientX: mouseX, clientY: mouseY } = e;
// 눈 요소 위치 및 크기 정보 가져오기
const { left, top, width, height } = eye.getBoundingClientRect();
// 눈 중심 좌표 계산
const eyeX = left + width / 2;
const eyeY = top + height / 2;
// 마우스와 눈 중심 간의 상대적인 좌표 계산
const deltaX = mouseX - eyeX;
const deltaY = mouseY - eyeY;
// 각도 계산 (마우스와 눈 중심 간의 각도)
const angle = Math.atan2(deltaY, deltaX);
// 눈동자 이동 거리 계산
const distance = Math.min(width, height) / 4;
// 눈동자 요소 가져오기
const eyePupil = eye.querySelector('.pupil');
// 눈동자 이동 애니메이션 적용
eyePupil.style.transform = `translate(-50%, -50%) translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
});
</script>
</body>
</html>
JavaScript로 마우스 이동에 따라 눈동자를 움직이는 효과를 구현하였습니다.
주석을 통해 코드의 각 부분에 대한 설명을 추가했습니다.
ㅇ[HTML소스포함]JavaScript로 텍스트 애니메이션
[HTML소스포함]JavaScript로 텍스트 애니메이션
HTML 삽입 미리보기할 수 없는 소스 [HTML소스포함] JavaScript 로 구현한 마우스를 올리면 텍스트가 회전하고 컬러가 변경되는 텍스트 애니메이션 텍스트 애니메이션 마우스를 올리면 텍스트가 회전
title.kr
반응형
'정보' 카테고리의 다른 글
| [HTML소스포함] 클릭으로 박스 이동하기, JavaScript 예제 (0) | 2023.12.08 |
|---|---|
| [HTML소스포함] "Canvas 게임", JavaScript 예제 (0) | 2023.12.07 |
| [HTML소스포함] 텍스트 애니메이션, JavaScript 예제 (0) | 2023.12.07 |
| 샤토 슈발블랑(Cheval Blanc) 프리미어 그랑크뤼 프랑스 보르도 와인 (0) | 2023.06.01 |
| "Sassicaia" 이탈리아 섬세하고 혁신적인 와인 (1) | 2023.05.28 |
댓글