CSS | ANIMATION | 마우스를 따라 움직이는 눈

마우스를 따라 움직이는 눈동자 애니메이션👀

마우스와 키보드에 따라 눈동자가 움직이도록 애니메이션을 만들어봅시다 ~!

---

#1. HTML 코드를 확인해보자

<div class="wrapper">
    <div class="card">
        <div class="me">
            <div class="eye"></div>
        </div>
        <div class="text">요리조리</div>
    </div>
</div>

#2. CSS(SCSS) 코드를 확인해보자

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
  
html, body {
	height: 100%;
	overflow: hidden;
}
  
.wrapper {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 369px;
	height: 547px;
	transform-style: preserve-3d;
}
  
.me {
	position: absolute;
	width: 369px;
	height: 547px;
	transform: translatez(80px) scale(0.8);
}
  
.me::before, .me::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 10px;
	background: url(http://www.supah.it/dribbble/006/profile.png) no-repeat 0 0;
}
  
.me::after {
	height: 30px;
	top: auto;
	bottom: -15px;
	filter: blur(15px);
	background-size: 100% 30px;
	border-radius: 100px;
}
  
.eye, .eye::before {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 175px;
	left: 119px;
	z-index:-1;
	background: url(http://www.supah.it/dribbble/006/eye.png);
}
  
.eye::before {
	content:'';
	top: -3px;
	left: 99px;
}

.text {
	position: absolute;
	left: 0;
	top: 0;
	z-index:2;
	width: 390px;
	height: 595px;
	transform: translatez(150px) translatex(-11px) translatey(-26px) scale(.55);
	border: 3px solid #fff;
	font-size: 35px;
	line-height: 1000px;
	text-align: center;
	color: #fff;
	opacity: 0.3;
	border-radius: 15px;
	background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.36) 39%, rgba(255,255,255,0)21%, #000 100%);
}
  
.text::after{
	content:'eye moving';
	width: 100%;
	position: absolute;
	bottom: 22px;
	left: 0;
	z-index:1;
	line-height: 1;
	font-size: 18px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 20px;
	text-indent: 20px;
}  

#3. JAVASCRUPT를 확인해보자

const wrap = document.querySelector('.wrapper');
const eye = document.querySelector('.eye');

const speed = 1;
let x = 0;
let y = 0;
let followX = 0;
let followY = 0;

function animate() {
	x += (followX - x) * speed;
	y += (followY - y) * speed;
	eye.style.transform=`translate(${-x}px, ${-y}px)`;
	wrap.style.transform=`translate(-50%, -50%) perspective(600px) rotateX(${-y}deg) rotateY(${-x}deg)`;
	requestAnimationFrame(animate);
}

window.addEventListener('mousemove',(e)=>{
	let mouseX = Math.max(-100, Math.min(100, window.innerWidth/2 - e.clientX));
	let mouseY = Math.max(-100, Math.min(100,window.innerHeight/2 - e.clientY));
	
	followX = (12 * mouseX) / 100;
	followY = (10 * mouseY) / 100;
});

window.addEventListener('keydown', (e) => {
	switch(e.keyCode){
	case 37:
		followX = 12;
		break;
	case 38:
		followY = 10;
		break;
	case39:
		followX = -12;
		break;
	case40:
		followY = -10;
		break;
	default:
		break;
	}

});
animate();