Как сделать такой след за движением мыши?

от
prokoding.ru > HTML > Как сделать такой след за движением мыши?

Для создания эффекта "следа" за движением мыши в веб-разработке можно воспользоваться языками HTML, CSS и JavaScript. Ниже приведен пример кода, который позволит реализовать данную функциональность:

1. HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse Trail Effect</title>
</head>
<body>
  <div id="trail"></div>
  <script src="script.js"></script>
</body>
</html>

2. CSS:

#trail {
  position: absolute;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  pointer-events: none;
}

3. JavaScript (в файле script.js):

document.addEventListener('DOMContentLoaded', function() {
  const trail = document.getElementById('trail');

  document.addEventListener('mousemove', function(e) {
    const x = e.pageX;
    const y = e.pageY;

    trail.style.left = x + 'px';
    trail.style.top = y + 'px';
  });
});

Этот код создает элемент div с идентификатором trail, который представляет собой "след" за движением мыши. С помощью CSS задается его стилизация (круглый элемент красного цвета). С помощью JavaScript отслеживается движение мыши, и позиция элемента trail изменяется в соответствии с текущими координатами указателя мыши.

Таким образом, при движении мыши по экрану будет создаваться эффект "следа", который будет следовать за курсором. Вся функциональность реализуется на клиентской стороне с использованием HTML, CSS и JavaScript.