<div class="container">
<div class="eye">
<div class="circle">
</div>
</div>
</div>
.conatiner {
width: 800px;
}
.eye {
width: 500px;
height: 500px;
background: #ff5b40;
margin: 0 auto;
position: relative;
}
.circle {
width: 100px;
height: 100px;
border-radius: 100%;
background: grey;
position: absolute;
left: 0;
top: 50%;
}
const eye = document.querySelector('.circle');
const container = document.querySelector('.eye');
const cursor = {x: 0, y: 0}; // координаты курсора
const position = {x: 0, y: 0}; // координаты круга
const width=500, height=500; // размер красного квадрата
const radius = 50; // радиус круга
const speedMultiplier = 0.03; // число в диаразоне [0:1], чем большетем быстрее круг догоняет курсор
let lastTime; // временная переменная для вычисления времени прошедшего между отрисовками кадров
document.addEventListener("mousemove", onMouseMove, false);
function onMouseMove(event){
// вычисляем координаты курсора относительно красного квадрата
const bounds = container.getBoundingClientRect();
cursor.x = event.clientX - bounds.left;
cursor.y = event.clientY - bounds.top;
}
function loop(timestamp, dt) {
// вычисляем поправку в зависимости от времени, прошедшего
// с момента отрисовки предыдущего кадра
const deltaTime = (timestamp - (lastTime??timestamp))/(1000/60);
lastTime = timestamp;
const multiplier = (speedMultiplier*deltaTime);
// вектор (направление) от текущих координат круга до курсора
const vector = {
x: cursor.x-position.x,
y: cursor.y-position.y
};
// вычисляем новую позицию с учетом вектора на курсор, скорости и временной поправки
position.x = position.x + vector.x*multiplier;
position.y = position.y + vector.y*multiplier;
// проверяем не вышла ли позиция за пределы красного квадрата
if(position.x<0) position.x = 0;
if(position.x>width-radius*2) position.x = width-radius*2;
if(position.y<0) position.y = 0;
if(position.y>height-radius*2) position.y = height-radius*2;
// выставляем круг в новую позицию
eye.style.left = Math.floor(position.x).toString()+'px';
eye.style.top = Math.floor(position.y).toString()+'px';
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);
This Pen doesn't use any external CSS resources.