Задача: нужно сделать так чтобы курсор оставлял после себя след в виде красного свечение как на фото, и чтобы в дальнейшем он постепенно исчезал
1 ответ
- В атрибуте
style
тегаbody
указатель скрывается *UPD. - Благодаря использованию экспериментальной технологии
CanvasRenderingContext2D.filter
(проверяйте совместимость) можно добиться желаемого результата, уменьшая радиус изображаемого круга. - Удаление и изменение радиусов кругов осуществляется путём сохранения их координат.
- Длинный список вставлен для примера работы на странице, не умещающейся на высоте окна, чёрный цвет текста позволяет (по моему мнению, более точно) определить, где именно происходит отрисовка кругов (под текстом).
- Управление эффектом осуществляется изменением переменных
radius
(радиус круга),period
(время, за которое круг исчезает),color
(цвет круга),blur
(радиус размытия) иcursorRadius
(радиус круга указателя).
var canvas = document.getElementById("blur_cursor");
var context = canvas.getContext("2d");
var width = document.body.offsetWidth;
var height = document.body.offsetHeight;
var points = [], cursor = [-100, -100];
var t = 0;
var radius = 50;
var period = 1000;
var color = "#f00";
var blur = 50;
var cursorRadius = 10;
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);
context.beginPath();
context.arc(cursor[0], cursor[1], cursorRadius, 0, 2*Math.PI, true);
context.filter = "none";
context.fill();
context.filter = filter;
window.requestAnimationFrame(draw);
}
window.onmousemove = function(event) {
let x = event.pageX;
let y = event.pageY;
points.push([x, y, 0]);
cursor = [x, y];
}
t = window.performance.now();
window.requestAnimationFrame(draw);
<body style="background: #000; cursor: none;">
<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>
*UPD
В текущем варианте курсор спрятан, и на его месте отображается круг (который будет находиться под элементом). Если нужен указатель, отображающийся поверх текста, то следует использовать картинку, то есть файл разметки должен стать таким (URL картинки можно изменить):
<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;">
А эти строки следует исключить:
context.beginPath();
context.arc(cursor[0], cursor[1], cursorRadius, 0, 2*Math.PI, true);
context.filter = "none";
context.fill();
context.filter = filter;
Пример курсора-картинки:
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>