Как сделать след от курсора мышки

Question

Как сделать след от курсора мышки

Рейтинг: 0Ответов: 1Опубликовано: 01.02.2023

Помогите пожалуйста сделать такой же след от курсора как на гифке: Вот код есть примерно похожего:

var canvas = document.getElementById("blur_cursor");
var context = canvas.getContext("2d");
var width = document.body.offsetWidth;
var height = document.body.offsetHeight;
var points = [];
var t = 0;

var radius = 50;
var period = 1000;
var color = "#f00";
var blur = 50;

canvas.style.width = canvas.width = width;
canvas.style.height = canvas.height = height;
context.fillStyle = color;
var filter = context.filter = "blur(" + blur + "px)";
var dr = radius / period;

function draw() {
  context.clearRect(0, 0, width, height);
  let i = 0;
  let deleted = 0;
  let dt = -t + (t = window.performance.now());
  context.beginPath();
  while (i++ < points.length - 1) {
    let p = points[i];
    let r = radius - (p[2] += dt) * dr;
    context.moveTo(p[0], p[1]);
    if (p[2] <= period) context.arc(p[0], p[1], r, 0, 2 * Math.PI, true);
    else deleted = i;
  }
  context.fill();
  points.splice(0, deleted);
  window.requestAnimationFrame(draw);
}

window.onmousemove = function(event) {
  points.push([event.pageX, event.pageY, 0]);
}

t = window.performance.now();
window.requestAnimationFrame(draw);

<body style="background: #000; cursor: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Red_Circle%28small%29.svg/44px-Red_Circle%28small%29.svg.png) 23 23, auto;">
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  <canvas id="blur_cursor" style="position: absolute; left: 0; top: 0; z-index: -1;">Не поддерживается</canvas>
</body>

Но не могу понять как сделать так плавно, с разными цветами, красочно

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Есть вот такой вариант...

$('html').on('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  var id = new Date();
  var sec = id.getSeconds();
  var min = id.getMinutes();
  var ms = id.getMilliseconds();
  var all = min + '' + sec + '' + ms;
  $('body').append('<div id=' + all + ' class="bubble"></div>');
  $('#' + all + '').css({
    'left': x,
    'top': y
  });
});

.bubble {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: coral;
  box-shadow: 0 0 0 0 coral;
  animation: leave 1s ease forwards;
}

@keyframes leave {
  from {
    width: 100px;
    height: 100px;
  }
  to {
    width: 0px;
    height: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Как сделать след от курсора мышки

Ответы