Сегодня вы узнаете как создать неоновый хвост для курсора мышки используя HTML, CSS и jаvascript. Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом.
Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Neon Mouse Cursor Tail - jаvascript</title>
<!--css file-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<canvas class="canvas"></canvas>
<script src="app.js"></script>
</body>
</html>CSS КОД:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
overflow: hidden;
}
.canvas {
display: block;
}jаvascript КОД:
let canvas = document.querySelector(".canvas");
let ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let tail = [];
/* rgba(0,255,255,1) */
function draw() {
ctx.fillStyle = "rgba(0,0,0,.1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//drawing mouse tail
for (let i = 0; i < tail.length; i++) {
ctx.beginPath();
ctx.arc(tail[i].x, tail[i].y, 10, 0, Math.PI * 2);
ctx.fillStyle = "#7cff01";
ctx.fill();
}
requestAnimationFrame(draw);
}
canvas.addEventListener("mousemove", (event) => {
//getting x and y co-ordinates of mouse cursor
let x = event.x;
let y = event.y;
//adding mouse co-ordinates to an array
tail.push({ x, y });
//removing first item from tail array
if (tail.length > 1) {
tail.shift();
}
});
//removing mouse tail dot when mouse is out of the window
canvas.addEventListener("mouseout", (event) => {
//removing first item from tail array
tail.shift();
});
window.addEventListener("resize", function () {
canvas.width = innerWidth;
canvas.height = innerHeight;
});
window.onload = () => {
requestAnimationFrame(draw);
};
