إنشاء تأثير مؤشرات متعددة للفأرة في JavaScript – دليل شامل مع أمثلة
مقدمة
في عالم تصميم الويب، يُعتبر إنشاء تأثيرات بصرية جذابة أحد الطرق لجذب المستخدمين. أحد هذه التأثيرات هو تأثير مؤشرات متعددة تتبع الفأرة (Multiple Cursors Follow Mouse) باستخدام JavaScript. هذا التأثير يعني أن عدة مؤشرات صغيرة تتبع حركات فأرة المستخدم وتنشئ رسومًا متحركة ديناميكية.
في هذه المقالة من راديب، سنشرح بالتفصيل وباستخدام أمثلة متعددة كيفية تنفيذ هذا التأثير. كما سنقدم في النهاية بعض الخدمات المرتبطة براديب التي تُفيد في تطوير المواقع وإنشاء التأثيرات البصرية.
لماذا يجب استخدام تأثير مؤشرات متعددة للفأرة؟
استخدام هذا التأثير يمكن أن يوفر المزايا التالية في تصميم المواقع:
- زيادة الجاذبية البصرية – يعطي الموقع مظهرًا عصريًا واحترافيًا.
- زيادة تفاعل المستخدمين – يجذب الحركات الديناميكية ويزيد من وقت بقاء المستخدمين في الموقع.
- بناء علامة تجارية إبداعية – المواقع ذات التصميمات المبتكرة تبقى في أذهان المستخدمين لفترة أطول.
طرق مختلفة لإنشاء تأثير Multiple Cursors
1. استخدام CSS و JavaScript (طريقة بسيطة)
في هذه الطريقة، نستخدم JavaScript لإنشاء عناصر دائرية تتبع المؤشر.
2. استخدام Canvas و JavaScript (طريقة أكثر احترافية)
في هذه الطريقة، نستخدم عنصر <canvas> لإنشاء تأثيرات رسومية أكثر كفاءة.
سنشرح كلا الطريقتين بالتفصيل.
شراء استضافة cPanel و DirectAdmin بأفضل سعر من راديب، انقر هنا
الطريقة 1: إنشاء مؤشرات متعددة باستخدام CSS و JavaScript
في هذه الطريقة، ننشئ أولاً عدة دوائر (cursors) ثم نقوم بتحديث مواقعها مع حركة الفأرة.
1. إنشاء HTML الأساسي
<!DOCTYPE html>
<html lang="ar">
<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>
2. إضافة أنماط 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;
}
3. إضافة JavaScript لتحريك المؤشرات المتعددة
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();
});
في هذه الطريقة، يتم إنشاء عدة دوائر تتبع مؤشر الفأرة مع تأخير بسيط.
شراء سيرفر سحابي بسعر ساعة بأفضل سعر من راديب، انقر هنا
الطريقة 2: استخدام Canvas لتأثيرات أكثر احترافية
هذه الطريقة مناسبة لإنشاء تأثيرات رسومية أكثر كفاءة.
1. HTML الأساسي
<canvas id="cursorCanvas"></canvas>
2. CSS لضبط الخلفية
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
3. JavaScript لإنشاء تأثير مؤشرات متعددة في 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 و JavaScript والطريقة الثانية باستخدام Canvas API التي توفر أداءً أفضل وتأثيرات أكثر احترافية.
أي الطريقتين تفضل؟ هل لديك أفكار لتحسين هذا التأثير؟ شاركنا آراءك على إنستغرام راديب أو تلغرام!
