Eyes Moving Effect
Home
Snippets
Eyes Moving Effect
HTML
CSS
JS
<div class="face"> <div class="eyes"> <div class="eye left"> <div class="eyeball"></div> </div> <div class="eye right"> <div class="eyeball"></div> </div> </div> <div class="mouth"></div> </div>
* { box-sizing: border-box; margin: 0; } body { min-height: 100vh; background-color: #545b7c; --fluid: clamp(1rem, 1rem + 3vw, 2rem); font-size: #{'round(down, var(--fluid), 2px)'}; font-family: 'Aboreto', system-ui; display: grid; place-content: center; } .face { display: flex; flex-direction: column; align-items: center; gap: 24px; } .eyes { display: flex; gap: 6px; } .eye { border-radius: 50%; width: 4.5rem; aspect-ratio: 1/1; background-color: #ececec; display: flex; justify-content: center; align-items: center; } .eyeball { width: 1.5rem; aspect-ratio: 1/1; background-color: #222; border-radius: 50%; transition: translate 0.05s ease-out; } .mouth { width: 3rem; height: 2rem; border-bottom: 1rem solid gold; border-radius: 50%; rotate: -15deg; }
const ratio = 1 const eyeballs = document.querySelectorAll('.eyeball') const handleEyesMove = (e) => { const centerX = window.innerWidth / 2 const centerY = window.innerHeight / 2 const x = ((e.clientX - centerX) / centerX) * ratio const y = ((e.clientY - centerY) / centerY) * ratio eyeballs.forEach(el => { el.style.translate = `${x * 100}% ${y * 100}%` }) } document.addEventListener('mousemove', handleEyesMove)
Ad #1
Ad #2
Scroll to Top