HTML/CSS Custom Pointing App Tool -- 2
Budget: ₹600 – ₹800 INR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointing App Tool</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling */
background-color: #f0f0f0; /* Light background for visibility */
cursor: none; /* Hide default cursor */
}
#pointer {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
pointer-events: none; /* So it doesn't interfere with clicks */
transition: opacity 0.5s; /* Smooth fade */
}
</style>
</head>
<body>
<div id="pointer"></div>
<script>
const pointer = document.getElementById('pointer');
// Track mouse movement
document.addEventListener('mousemove', (e) => {
pointer.style.left = `${e.clientX - 10}px`; // Center the dot on cursor
pointer.style.top = `${e.clientY - 10}px`;
pointer.style.opacity = '1'; // Make it visible
});
// On click, briefly highlight (fade out after 1 second)
document.addEventListener('click', () => {
setTimeout(() => {
pointer.style.opacity = '0.5'; // Fade to semi-transparent
}, 1000);
});
// Optional: Hide pointer when mouse leaves the window
document.addEventListener('mouseleave', () => {
pointer.style.opacity = '0';
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointing App Tool</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling */
background-color: #f0f0f0; /* Light background for visibility */
cursor: none; /* Hide default cursor */
}
#pointer {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
pointer-events: none; /* So it doesn't interfere with clicks */
transition: opacity 0.5s; /* Smooth fade */
}
</style>
</head>
<body>
<div id="pointer"></div>
<script>
const pointer = document.getElementById('pointer');
// Track mouse movement
document.addEventListener('mousemove', (e) => {
pointer.style.left = `${e.clientX - 10}px`; // Center the dot on cursor
pointer.style.top = `${e.clientY - 10}px`;
pointer.style.opacity = '1'; // Make it visible
});
// On click, briefly highlight (fade out after 1 second)
document.addEventListener('click', () => {
setTimeout(() => {
pointer.style.opacity = '0.5'; // Fade to semi-transparent
}, 1000);
});
// Optional: Hide pointer when mouse leaves the window
document.addEventListener('mouseleave', () => {
pointer.style.opacity = '0';
});
</script>
</body>
</html>
Related categories:
JavaScript
CSS
HTML5
HTML
Web Development
Frontend Development
Web Application
User Experience Research
Web Design