ایجاد افکت چندین نشانگر موس در جاوا اسکریپت – راهنمای کامل همراه با مثال
مقدمه
در دنیای طراحی وب، ایجاد جلوه‌های بصری زیبا یکی از راه‌های جذب کاربران است. یکی از این جلوه‌های جذاب، افکت چندین نشانگر موس (Multiple Cursors Follow Mouse) در JavaScript است. این افکت به این صورت است که چندین نشانگر کوچک، حرکات موس کاربر را دنبال می‌کنند و یک انیمیشن پویا ایجاد می‌کنند.
در این مقاله از رادیب، به‌صورت کامل و با مثال‌های متعدد، نحوه پیاده‌سازی این افکت را توضیح خواهیم داد. همچنین در انتها، برخی از سرویس‌های مرتبط رادیب که در توسعه وبسایت و طراحی جلوه‌های بصری مفید هستند، معرفی می‌کنیم.
چرا باید از افکت چندین نشانگر موس استفاده کنیم؟
استفاده از این افکت می‌تواند در طراحی سایت مزایای زیر را به همراه داشته باشد:
- افزایش جذابیت بصری – این افکت به سایت جلوه‌ای مدرن و حرفه‌ای می‌بخشد.
- تعامل بیشتر کاربران – حرکات پویا کاربران را جذب کرده و زمان ماندگاری آن‌ها در سایت را افزایش می‌دهد.
- برندسازی خلاقانه – وبسایت‌هایی که طراحی‌های نوآورانه دارند، در ذهن کاربران ماندگارتر خواهند بود.
روش‌های مختلف برای ایجاد افکت Multiple Cursors
۱. استفاده از CSS و JavaScript (روش ساده)
در این روش، از JavaScript برای ایجاد عناصر دایره‌ای که نشانگر را دنبال می‌کنند، استفاده می‌کنیم.
۲. استفاده از Canvas و JavaScript (روش حرفه‌ای‌تر)
در این روش، از عنصر <canvas> استفاده می‌کنیم تا افکت‌های گرافیکی بهینه‌تری ایجاد کنیم.
در ادامه، هر دو روش را بررسی می‌کنیم.
خرید هاست cPanel و DirectAdmin با بهترین قیمت از رادیب، کلیک کنید
روش ۱: ایجاد چندین نشانگر با CSS و JavaScript
در این روش، ابتدا چندین دایره (cursors) ایجاد می‌کنیم و سپس موقعیت آن‌ها را با حرکت موس به‌روزرسانی می‌کنیم.
۱. ایجاد HTML اولیه
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>افکت چندین نشانگر موس</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
۲. افزودن استایل‌های CSS
body {
background-color: #111;
cursor: none;
overflow: hidden;
}
.cursor {
width: 10px;
height: 10px;
background-color: #f39c12;
position: absolute;
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s ease-out;
}
۳. اضافه کردن جاوا اسکریپت برای حرکت چندین نشانگر
document.addEventListener("DOMContentLoaded", () => {
const numCursors = 10;
const cursors = [];
for (let i = 0; i < numCursors; i++) {
let cursor = document.createElement("div");
cursor.classList.add("cursor");
document.body.appendChild(cursor);
cursors.push(cursor);
}
let mouseX = 0, mouseY = 0;
document.addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function animateCursors() {
let x = mouseX;
let y = mouseY;
cursors.forEach((cursor, index) => {
setTimeout(() => {
cursor.style.transform = `translate(${x}px, ${y}px)`;
}, index * 50);
});
requestAnimationFrame(animateCursors);
}
animateCursors();
});
در این روش، چندین دایره ایجاد می‌شوند و هر کدام با کمی تأخیر، نشانگر موس را دنبال می‌کنند.
خرید سرور مجازی ساعتی ابری با بهترین قیمت از رادیب، کلیک کنید
روش ۲: استفاده از Canvas برای افکت‌های حرفه‌ای‌تر
این روش برای ایجاد افکت‌های گرافیکی بهینه‌تر مناسب است.
۱. HTML اولیه
<canvas id="cursorCanvas"></canvas>
۲. CSS برای تنظیم پس‌زمینه
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
۳. جاوا اسکریپت برای ایجاد افکت چندین نشانگر در Canvas
const canvas = document.getElementById("cursorCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
document.addEventListener("mousemove", (e) => {
particles.push({
x: e.clientX,
y: e.clientY,
size: Math.random() * 5 + 2,
opacity: 1
});
});
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((p, i) => {
p.opacity -= 0.02;
if (p.opacity <= 0) {
particles.splice(i, 1);
} else {
ctx.fillStyle = `rgba(255, 165, 0, ${p.opacity})`;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
}
});
requestAnimationFrame(animate);
}
animate();
این روش از Canvas API استفاده می‌کند که کارایی بهتری نسبت به روش اول دارد و می‌توان افکت‌های جذاب‌تری مانند دنباله‌های محو ایجاد کرد.
ثبت آنی دامنه تنها با سه کلیک، در رادیب، کلیک اول را بزنید
معرفی خدمات رادیب
اگر به دنبال طراحی سایت حرفه‌ای یا افکت‌های گرافیکی جذاب هستید، گروه رادیب خدمات متنوعی ارائه می‌دهد:
1. طراحی وبسایت و اپلیکیشن موبایل: طراحی وبسایت و اپ
2. خرید هاست و سرور حرفه‌ای برای میزبانی سایت: هاست cPanel و DirectAdmin
3. طراحی گرافیک، لوگو و عناصر بصری: طراحی لوگو و گرافیک
4. پشتیبانی سایت و شبکه‌های اجتماعی: پشتیبانی و سئو
برای استفاده از این خدمات و دریافت مشاوره رایگان، به وبسایت رادیب مراجعه کنید.
نتیجه‌گیری
در این مقاله از رادیب، دو روش برای ایجاد افکت چندین نشانگر موس در JavaScript را بررسی کردیم. روش اول با استفاده از CSS و جاوا اسکریپت و روش دوم با Canvas API که بهینه‌تر و حرفه‌ای‌تر است.
شما کدام روش را ترجیح می‌دهید؟ آیا ایده خاصی برای بهبود این افکت دارید؟ نظرات خود را با ما در اینستاگرام رادیب یا تلگرام به اشتراک بگذارید!
