마우스 이벤트 눈동자 움직임. 정보
마우스 이벤트 눈동자 움직임.
본문
오후 잠이 오네요.
날씨가 비가 방울 방울 떨어집니다.
모두 건강 조심들 하세요.
서핑하다 좋을 듯 해서 올립니다.
감사합니다.
index.html
<!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">
<title>eyes mouse follow effect</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(#f2761e, #ef4921);
}
.box{
display: flex;
}
.box .eye{
position: relative;
width: 120px;
height: 120px;
display: block;
background: #fff;
margin: 0 20px;
border-radius: 50%;
box-shadow: 0 5px 45px rgba(0,0,0,0.2),
inset 0 0 15px #f2761e,
inset 0 0 25px #f2761e;
}
.box .eye::before{
content: '';
position: absolute;
top: 50%;
left: 35%;
transform: translate(-50%, -50%);
width: 45px;
height: 45px;
border-radius: 50%;
background-color: #000;
border: 10px solid #2196f3;
box-sizing: border-box;
}
</style>
<body>
<div class="box">
<div class="eye"></div>
<div class="eye"></div>
</div>
</body>
<script>
document.querySelector('body').addEventListener('mousemove', eyeball);
function eyeball(){
const eye = document.querySelectorAll('.eye');
eye.forEach(function(eye){
let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotation = (radian * (180 / Math.PI) * -1) + 270;
eye.style.transform = "rotate("+rotation+"deg)"
});
}
</script>
</html>
3
댓글 5개
코드를 서버에 올리지 않고 비타주리님의 자바스크립트작성 스킨 게시판에 입력해보았어요
http://pws.co.kr/bbs/board.php?bo_table=js_board&wr_id=18
배경이 온통 주황색이네요^^
