Как сделать след от курсора?

Question

Хочу сделать на сайте след от курсора, подобный как на этом https://jacekjeznach.com/, но не знаю с чего начать и как это реализовать, используя canvas, или что-то другое.

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

Answer 1

Похожий вопрос и готовое решение отсюда: https://stackoverflow.com/questions/7790725/javascript-track-mouse-position

с небольшими изменениями:

js:

  (function() {
    "use strict";

    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
      var dot, eventDoc, doc, body, pageX, pageY;
      
      event = event || window.event; // IE-ism
      if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
      }

      // Add a dot to follow the cursor
      dot = document.createElement('div');
      dot.className = "dot";
      dot.style.left = event.pageX + "px";
      dot.style.top = event.pageY + "px";
      document.body.appendChild(dot);
    }
  })();

css:

.dot {
  width: 5px;
  height: 5px;
  border-radius: 80%;
  box-shadow: 0 0 10px #000;
  background-color: #ccc;
  position: absolute;
}

jsfiddle: https://jsfiddle.net/VladimirNT1/m3pdubwh/8/

Answer 2

используй canvas(https://www.internet-technologies.ru/articles/risuem-krug-dvizhuschiysya-vsled-za-kursorom-myshi.html)здесь круг замени на што хочеш(https://pcvector.net/codepen/694-oblachnyj-sled-ot-kursora-na-kanvase.html)или как здесь

БЛОГ НА HUSL

Как сделать след от курсора?

Ответы (2 шт):