El cursor personalizado mejora la legibilidad del documento y atrae la atención del usuario hacia una parte específica de la página web. Hoy vamos a aprender cómo crear un cursor personalizado para una página web usando HTML, CSS y Javascript.
Acercarse:
- Oculte el cursor predeterminado.
- Defina las clases que contienen todas las animaciones.
- Agregue y elimine estas clases dinámicamente cuando se presiona el botón del mouse o cuando se mueve el puntero del mouse.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--color: 255, 71, 84;
--cursor-size: 30px;
}
* {
cursor: none;
}
html,
body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
background: #121212;
}
.custom-cursor {
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: var(--cursor-size);
height: var(--cursor-size);
border: calc(var(--cursor-size)
/30) solid #fff;
border-radius: 50%;
animation: cursor 800ms infinite
alternate ease-in-out;
pointer-events: none;
}
.custom-cursor::before {
content: "";
display: block;
width: calc(var(--cursor-size) / 2);
height: calc(var(--cursor-size) / 2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: calc(var(--cursor-size) / 6)
solid rgba(var(--color), 0.5);
border-radius: 50%;
animation: cursor-before 800ms infinite
alternate ease-in-out;
}
.custom-cursor.click {
animation: cursor-click 800ms
normal ease-in-out;
}
@keyframes cursor {
from {
transform: scale(1);
border-color: #fff;
}
to {
transform: scale(1.5);
border-color: rgb(var(--color));
}
}
@keyframes cursor-before {
from {
transform: translate(-50%, -50%) scale(1);
border-color: rgba(var(--color), 0.5);
}
to {
transform: translate(-50%, -50%) scale(1.5);
border-color: rgba(var(--color), 0.75);
}
}
@keyframes cursor-click {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(2.5);
border-color: rgb(var(--color));
}
}
</style>
</head>
<body>
<div class="custom-cursor"></div>
</body>
</html>
Código JavaScript:
javascript
const cursor = document
.querySelector(".custom-cursor");
// Adding the animations when the
// mouse button is clicked
window.addEventListener("mousedown", (event) => {
if (!cursor.classList.contains("click")) {
cursor.classList.add("click");
setTimeout(() => {
cursor.classList.remove("click");
}, 800);
}
});
// Getting the position of the cursor
window.addEventListener("mousemove", (event) => {
let x = event.pageX - cursor.offsetWidth / 2,
y = event.pageY - cursor.offsetHeight / 2;
cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
});
Código completo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--color: 255, 71, 84;
--cursor-size: 30px;
}
* {
cursor: none;
}
html,
body {
height: 100%;
}
body {
margin: 0;
overflow: hidden;
background: #121212;
}
.custom-cursor {
position: absolute;
z-index: 99;
top: 0;
left: 0;
width: var(--cursor-size);
height: var(--cursor-size);
border: calc(var(--cursor-size)
/ 30) solid #fff;
border-radius: 50%;
animation: cursor 800ms infinite
alternate ease-in-out;
}
.custom-cursor::before {
content: "";
display: block;
width: calc(var(--cursor-size) / 2);
height: calc(var(--cursor-size) / 2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: calc(var(--cursor-size) / 6)
solid rgba(var(--color), 0.5);
border-radius: 50%;
animation: cursor-before 800ms
infinite alternate ease-in-out;
}
.custom-cursor.click {
animation: cursor-click 800ms
normal ease-in-out;
}
@keyframes cursor {
from {
transform: scale(1);
border-color: #fff;
}
to {
transform: scale(1.5);
border-color: rgb(var(--color));
}
}
@keyframes cursor-before {
from {
transform: translate(-50%, -50%) scale(1);
border-color: rgba(var(--color), 0.5);
}
to {
transform: translate(-50%, -50%) scale(1.5);
border-color: rgba(var(--color), 0.75);
}
}
@keyframes cursor-click {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(2.5);
border-color: rgb(var(--color));
}
}
</style>
</head>
<body>
<div class="custom-cursor"></div>
<script>
const cursor = document
.querySelector(".custom-cursor");
// Adding the animations when the
// mouse button is clicked
window.addEventListener("mousedown", (event) => {
if (!cursor.classList.contains("click")) {
cursor.classList.add("click");
setTimeout(() => {
cursor.classList.remove("click");
}, 800);
}
});
// Getting the position of the cursor
window.addEventListener("mousemove", (event) => {
let x = event.pageX - cursor.offsetWidth / 2,
y = event.pageY - cursor.offsetHeight / 2;
cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
});
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari