Let’s create a Magic Mouse Effect using HTML, CSS, and JavaScript. This effect will add a touch of interactivity to the mouse cursor, creating a captivating visual experience as it moves across the screen.
We’ll keep it mesmerizing yet straightforward, using HTML to set up the structure, CSS for styling and animations, and JavaScript to handle the mouse movement interactions.
Let’s dive into building the Magic Mouse Effect. Whether you’re a beginner or an experienced developer, this project offers an enchanting way to explore the possibilities of web design and interaction.
Let’s make the mouse cursor come alive with magic!
HTML :
This HTML code sets up a webpage titled “Magic Mouse Effect” with a link to an external stylesheet (style.css) and JavaScript file (script.js). The stylesheet defines the visual styling for the webpage, while the JavaScript file contains the logic for the magic mouse effect. Additionally, it imports the Font Awesome kit to use its icons within the webpage.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title> Magic Mouse Effect </title> <link rel="stylesheet" href="./style.css"> </head> <body> <script src='https://kit.fontawesome.com/1ee8f271b9.js'></script><script src="./script.js"></script> </body> </html>
CSS :
This CSS code defines the visual styling for a star animation effect on a webpage. It includes variables for glow color, sets a gradient background, and styles stars with animations for movement, rotation, scale, and opacity. The glow-point class creates a glowing effect, while the star class styles the stars themselves.
:root {
--glow-rgb: 239 42 201;
}
body {
background: linear-gradient(145deg, rgb(119, 46, 195), rgb(58, 18, 153));
height: 100vh;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.glow-point {
position: absolute;
box-shadow: 0rem 0rem 1.2rem 0.6rem rgb(var(--glow-rgb));
pointer-events: none;
}
.star {
position: absolute;
z-index: 2;
color: white;
font-size: 1rem;
animation-duration: 1500ms;
animation-fill-mode: forwards;
pointer-events: none;
}
@keyframes fall-1 {
0% {
transform: translate(0px, 0px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(0.25);
opacity: 0;
}
5% {
transform: translate(10px, -10px) rotateX(45deg) rotateY(30deg) rotateZ(0deg) scale(1);
opacity: 1;
}
100% {
transform: translate(25px, 200px) rotateX(180deg) rotateY(270deg) rotateZ(90deg) scale(1);
opacity: 0;
}
}
@keyframes fall-2 {
0% {
transform: translate(0px, 0px) rotateX(-20deg) rotateY(10deg) scale(0.25);
opacity: 0;
}
10% {
transform: translate(-10px, -5px) rotateX(-20deg) rotateY(10deg) scale(1);
opacity: 1;
}
100% {
transform: translate(-10px, 160px) rotateX(-90deg) rotateY(45deg) scale(0.25);
opacity: 0;
}
}
@keyframes fall-3 {
0% {
transform: translate(0px, 0px) rotateX(0deg) rotateY(45deg) scale(0.5);
opacity: 0;
}
15% {
transform: translate(7px, 5px) rotateX(0deg) rotateY(45deg) scale(1);
opacity: 1;
}
100% {
transform: translate(20px, 120px) rotateX(-180deg) rotateY(-90deg) scale(0.5);
opacity: 0;
}
}
JavaScript:
This code creates a visual effect on a webpage where stars appear and follow the movement of the mouse cursor or touch input. It initializes parameters and helper functions, then handles mouse or touch movement events. Stars are created at the cursor’s position, with trailing glow effects. Stars appear at intervals based on movement and time, with parameters like animation duration and colors configurable.
let start = new Date().getTime();
const originPosition = { x: 0, y: 0 };
const last = {
starTimestamp: start,
starPosition: originPosition,
mousePosition: originPosition
}
const config = {
starAnimationDuration: 1500,
minimumTimeBetweenStars: 250,
minimumDistanceBetweenStars: 75,
glowDuration: 75,
maximumGlowPointSpacing: 10,
colors: ["249 146 253", "252 254 255"],
sizes: ["1.4rem", "1rem", "0.6rem"],
animations: ["fall-1", "fall-2", "fall-3"]
}
let count = 0;
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
selectRandom = items => items[rand(0, items.length - 1)];
const withUnit = (value, unit) => `${value}${unit}`,
px = value => withUnit(value, "px"),
ms = value => withUnit(value, "ms");
const calcDistance = (a, b) => {
const diffX = b.x - a.x,
diffY = b.y - a.y;
return Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
}
const calcElapsedTime = (start, end) => end - start;
const appendElement = element => document.body.appendChild(element),
removeElement = (element, delay) => setTimeout(() => document.body.removeChild(element), delay);
const createStar = position => {
const star = document.createElement("span"),
color = selectRandom(config.colors);
star.className = "star fa-solid fa-sparkle";
star.style.left = px(position.x);
star.style.top = px(position.y);
star.style.fontSize = selectRandom(config.sizes);
star.style.color = `rgb(${color})`;
star.style.textShadow = `0px 0px 1.5rem rgb(${color} / 0.5)`;
star.style.animationName = config.animations[count++ % 3];
star.style.starAnimationDuration = ms(config.starAnimationDuration);
appendElement(star);
removeElement(star, config.starAnimationDuration);
}
const createGlowPoint = position => {
const glow = document.createElement("div");
glow.className = "glow-point";
glow.style.left = px(position.x);
glow.style.top = px(position.y);
appendElement(glow)
removeElement(glow, config.glowDuration);
}
const determinePointQuantity = distance => Math.max(
Math.floor(distance / config.maximumGlowPointSpacing),
1
);
const createGlow = (last, current) => {
const distance = calcDistance(last, current),
quantity = determinePointQuantity(distance);
const dx = (current.x - last.x) / quantity,
dy = (current.y - last.y) / quantity;
Array.from(Array(quantity)).forEach((_, index) => {
const x = last.x + dx * index,
y = last.y + dy * index;
createGlowPoint({ x, y });
});
}
const updateLastStar = position => {
last.starTimestamp = new Date().getTime();
last.starPosition = position;
}
const updateLastMousePosition = position => last.mousePosition = position;
const adjustLastMousePosition = position => {
if(last.mousePosition.x === 0 && last.mousePosition.y === 0) {
last.mousePosition = position;
}
};
const handleOnMove = e => {
const mousePosition = { x: e.clientX, y: e.clientY }
adjustLastMousePosition(mousePosition);
const now = new Date().getTime(),
hasMovedFarEnough = calcDistance(last.starPosition, mousePosition) >= config.minimumDistanceBetweenStars,
hasBeenLongEnough = calcElapsedTime(last.starTimestamp, now) > config.minimumTimeBetweenStars;
if(hasMovedFarEnough || hasBeenLongEnough) {
createStar(mousePosition);
updateLastStar(mousePosition);
}
createGlow(last.mousePosition, mousePosition);
updateLastMousePosition(mousePosition);
}
window.onmousemove = e => handleOnMove(e);
window.ontouchmove = e => handleOnMove(e.touches[0]);
document.body.onmouseleave = () => updateLastMousePosition(originPosition);
In short, creating a Magic Mouse Effect with HTML, CSS, and JavaScript has been an enchanting journey into interactive web design. By combining these technologies, we’ve added a captivating visual experience to the mouse cursor movement on the screen. Whether you’re new to coding or experienced, this project offers a mesmerizing way to enhance user engagement.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
