Cursor animation using HTML, CSS and JavaScript
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Cursor Animation</title>
</head>
<body>
<main id="main" class="app">
<div class="cursor magnify-cursor"></div>
<div class="circle"></div>
<h1 class="magnifier">Cursor Animation</h1>
<div id="btn-container">
<button name="normal">Normal</button>
<button name="neonCursorTrails">Neon Cursor Trails</button>
<button name="MagnifierTransparent">Magnifier/Transparent</button>
</div>
</main>
<script type="module" src="./script.js"></script>
</body>
</html>
style.css file:
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
cursor: none;
}
.app canvas {
display: block;
position: absolute;
top: 47px;
z-index: 1;
}
/* ---------Start
of Normal button cursor Animation */
of Normal button cursor Animation */
#main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 80vh;
width: 80vw;
margin: 3rem auto;
background: #000115;
}
.cursor {
position: fixed;
background: #2696E8;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
box-shadow: 0 0 20px green, 0 0 20px green, 0 0 20px green;
transform: translate(-50%, -50%);
animation: colors 5s infinite;
}
@keyframes colors {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.cursor::before {
content: '';
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: #2696E8;
opacity: 0.2;
transform: translate(-30%, -30%);
}
h1 {
color: rgb(207, 203, 203);
z-index: 2;
}
#btn-container {
margin-top: 1rem;
z-index: 2;
}
button {
padding: 8px;
margin: 8px;
border: 2px solid white;
border-radius: 8px;
background: transparent;
color: white;
font-weight: 600;
cursor: pointer;
}
/* ---------End of Normal button cursor Animation */
/* ---------Start of Magnifier or Transparent button cursor Animation */
.magnify-cursor {
position: absolute;
width: 10px;
height: 10px;
border-radius: 100%;
top: 50%;
left: 50%;
background: #c2c2ff;
pointer-events: none;
mix-blend-mode: difference;
transition: transform 0.5s;
z-index: 9;
}
.magnify-cursor.hovered {
background: #c2c2ff;
transform: scale(6.2);
}
.circle {
position: absolute;
pointer-events: none;
width: 50px;
height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
transition: all 0.2s cubic-bezier(0, 0.5, 1, 1);
z-index: 0;
display: none;
}
/* ---------End of Magnifier or Transparent button cursor Animation */
script.js file:
import { neonCursor } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js'
const cursor = document.querySelector('.cursor');
const magnifyCursor = document.querySelector(".magnify-cursor");
const circle = document.querySelector(".circle");
const app = document.querySelector(".app");
const btns = document.querySelectorAll('#btn-container button');
// let timeout;
btns.forEach(btn => {
// cursor animation hide inside button
btn.addEventListener('mouseenter', () => {
cursor.style.display = 'none'
});
// cursor animation show outside button
btn.addEventListener('mouseout', () => {
cursor.style.display = 'block'
});
btn.addEventListener('click', () => {
if (btn.name == "normal") {
location.reload();
}
else if (btn.name == "neonCursorTrails") {
neonCursorTrails();
}
else if (btn.name == "MagnifierTransparent") {
MagnifierTransparent();
}
else {
console.log("not matched")
}
});
});
const normal = () => {
cursor.classList.remove("magnify-cursor");
document.addEventListener('mousemove', (e) => {
const x = e.pageX;
const y = e.pageY;
cursor.style.top = y + 'px';
cursor.style.left = x + 'px';
// Stop animation
// function stopAnimation() {
// cursor.style.display = 'none';
// }
// Hide animation
// clearTimeout(timeout);
// timeout = setTimeout(stopAnimation, 1000)
});
}
normal();
const neonCursorTrails = () => {
magnifyCursor.classList.remove("magnify-cursor");
circle.classList.remove("hovered");
// app.classList.add("app");
neonCursor({
el: document.querySelector('.app'),
shaderPoints: 16,
curvePoints: 80,
curveLerp: 0.5,
radius1: 5,
radius2: 30,
velocityTreshold: 10,
sleepRadiusX: 100,
sleepRadiusY: 100,
sleepTimeCoefX: 0.0025,
sleepTimeCoefY: 0.0025
});
}
const MagnifierTransparent = () => {
circle.style.display = "block";
cursor.classList.add("magnify-cursor");
cursor.classList.remove("cursor");
document.body.style.backgroundColor = 'gray';
const magnifier = document.querySelector(".magnifier");
// app.classList.remove("app");
// Handle mouse over/out event on text
magnifier.addEventListener("mouseenter", handleMouseEnter);
magnifier.addEventListener("mouseleave", handleMouseLeave);
// Move the cursor in dom
window.addEventListener("mousemove", handleMouseMove);
function handleMouseMove(event) {
// Add cursor movement additionally, actually I've done above
// const cursor_top = event.pageY - cursor.clientHeight / 2;
// const cursor_left = event.pageX - cursor.clientWidth / 2;
// cursor.style.top = cursor_top + "px";
// cursor.style.left = cursor_left + "px";
const circle_top = event.pageY - circle.clientHeight / 2;
const circle_left = event.pageX - circle.clientWidth / 2;
circle.style.top = circle_top + "px";
circle.style.left = circle_left + "px";
}
// Event: mouse enter on text
function handleMouseEnter() {
cursor.classList.add("hovered");
circle.classList.add("hovered");
}
// Event: mouse leave on text
function handleMouseLeave() {
cursor.classList.remove("hovered");
circle.classList.remove("hovered");
}
}
0 Comments