 | Crazy Mouse |  |
Draw lots of mouse cursors on the page - so the real mouse cursor gets lost - take a look at the output below - can you spot the real mouse cursor?
 Draw lots of animated mouse cursors moving around on the browser window - so the main mouse cursor gets lost.
The full code for the crazy mouse demo is given below (essentially - drawing lots of mouse cursors on the screen).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving Mouse Cursors</title>
<style>
.cursor {
position: absolute;
width: 15px; /* Size to match the system cursor size */
height: 21px;
background-image: url('https://www.freeiconspng.com/thumbs/cursor-png/download-big-image-png-medium-image-png-small-image-png-microsoft--15.png');
background-size: 100% 100%;
pointer-events: none;
border: 0px solid blue;
}
body { overflow: hidden; }
</style>
</head>
<body>
<div id="cursors"></div>
<script>
const cursorCount = 90; // Number of cursors
const cursors = [];
const cursorContainer = document.getElementById('cursors');
// Function to move a cursor smoothly
function moveCursor(cursor) {
const randomX = -window.innerWidth/2 + Math.random() * window.innerWidth*2;
const randomY = -window.innerHeight/2 + Math.random() * window.innerHeight*2;
cursor.style.transition = `transform ${Math.random() * 3 + 2}s ease-in-out`;
cursor.style.transform = `translate(${randomX}px, ${randomY}px)`;
}
// Create and animate multiple cursor elements
for (let i = 0; i < cursorCount; i++) {
const cursor = document.createElement('div');
cursor.classList.add('cursor');
cursor.style.top = `${Math.random() * window.innerHeight/2}px`;
cursor.style.left = `${Math.random() * window.innerWidth/2}px`;
cursorContainer.appendChild(cursor);
cursors.push(cursor);
// Move cursor initially
moveCursor(cursor);
// Move cursor periodically
setInterval(() => {
moveCursor(cursor);
}, Math.random() * 5000 + 300); // Move every 3-8 seconds
}
</script>
</body>
</html>
Of course, when the 'real' mouse cursor leaves the window you'll be able to spot it! Or if you 'tab' to another window ;)
|
