Как сделать анимацию/движение элемента за курсором?

Для создания анимации движения элемента за курсором в JavaScript, можно воспользоваться следующим подходом:

1. Сначала получите ссылку на элемент, который нужно анимировать, используя метод document.querySelector или document.getElementById. Например:

const element = document.querySelector('.my-element');

2. Добавьте обработчик событий mousemove к элементу, чтобы следить за движением курсора мыши. Внутри обработчика можно задать логику движения элемента. Например:

element.addEventListener('mousemove', moveElement);

3. Определите функцию moveElement, которая будет вызываться при каждом движении курсора. Эта функция будет определять новые координаты элемента и задавать их через CSS свойства top и left. Например:

function moveElement(event) {
  // Получаем координаты курсора относительно окна браузера
  const x = event.clientX;
  const y = event.clientY;

  // Задаем новые координаты элемента
  element.style.top = `${y}px`;
  element.style.left = `${x}px`;
}

4. Чтобы движение элемента выглядело плавным и анимированным, можно добавить CSS свойство transition для элемента. Например:

.my-element {
  transition: top 0.3s, left 0.3s;
}

Теперь, когда пользователь будет двигать курсор мыши, элемент будет следовать за ним с плавной анимацией.

Дополнительно, можно добавить другие эффекты и доработки, например, задать ограничения для движения элемента в определенном диапазоне, изменить скорость или добавить эффекты слежения. Эти доработки зависят от ваших потребностей и ограничений проекта.