Creating Multiple Mouse Cursor Effects in JavaScript – Complete Guide with Examples
Introduction
In the world of web design, creating beautiful visual effects is one of the ways to attract users. One of these attractive effects is the Multiple Cursors Follow Mouse effect in JavaScript. This effect works by having several small cursors follow the user's mouse movements and create a dynamic animation.
In this article from Radib, we will fully explain how to implement this effect with multiple examples. Additionally, at the end, we will introduce some Radib-related services that are useful for website development and designing visual effects.
Why Should We Use the Multiple Mouse Cursor Effect?
Using this effect can bring the following benefits to website design:
- Increased Visual Appeal – This effect gives the site a modern and professional look.
- More User Interaction – Dynamic movements attract users and increase their time spent on the site.
- Creative Branding – Websites with innovative designs will be more memorable for users.
Different Methods to Create the Multiple Cursors Effect
1. Using CSS and JavaScript (Simple Method)
In this method, we use JavaScript to create circular elements that follow the cursor.
2. Using Canvas and JavaScript (More Professional Method)
In this method, we use the <canvas> element to create more optimized graphical effects.
We will examine both methods below.
Buy cPanel and DirectAdmin hosting at the best price from Radib, click here
Method 1: Creating Multiple Cursors with CSS and JavaScript
In this method, we first create several circles (cursors) and then update their positions as the mouse moves.
1. Initial HTML
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Mouse Cursor Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>
2. Adding CSS Styles
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. Adding JavaScript for Moving Multiple Cursors
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();
});
In this method, multiple circles are created, and each follows the mouse cursor with a slight delay.
Buy hourly cloud VPS at the best price from Radib, click here
Method 2: Using Canvas for More Professional Effects
This method is suitable for creating more optimized graphical effects.
1. Initial HTML
<canvas id="cursorCanvas"></canvas>
2. CSS for Background Setup
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
3. JavaScript for Creating Multiple Cursor Effects in 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();
This method uses the Canvas API, which is more efficient than the first method and allows for more attractive effects like fading trails.
Instant domain registration with just three clicks, at Radib, click for the first step
Introducing Radib Services
If you're looking for professional website design or attractive graphical effects, Radib Group offers a variety of services:
1. Website and Mobile App Design: Website and App Design
2. Hosting and Professional Server Purchase for Website Hosting: cPanel and DirectAdmin Hosting
3. Graphic Design, Logo, and Visual Elements: Logo and Graphic Design
4. Website and Social Media Support: Support and SEO
To take advantage of these services and receive free consultation, visit the Radib website.
Conclusion
In this article from Radib, we examined two methods for creating multiple mouse cursor effects in JavaScript. The first method uses CSS and JavaScript, while the second method uses the Canvas API, which is more optimized and professional.
Which method do you prefer? Do you have any ideas to improve this effect? Share your thoughts with us on Radib's Instagram or Telegram!
