Como hacer tu propio cursor personalizado para tu web

by Nadal Vicens Date: 08-06-2022 cursor raton mouse javascript css personalizado diseño diseño web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores, así que investigué para poder incorporarlo en mi web.

Hoy os traigo una versión simple de un cursor personalizado para que os pueda servir de base y para que podáis empezar a toquetear hasta que lleguéis a tener el cursor que queráis.

El html es muy simple, es un simple div con la clase que queráis ponerle en mi caso será “cursor” y he añadido una lista para tener algo y ver cómo interactúa el cursor.

<body>
    <div class="cursor"></div>
    <ul>
        <li>Enlace 1</li>
        <li>Enlace 2</li>
        <li>Enlace 3</li>
        <li>Enlace 4</li>
    </ul>
</body>

Después de tener el html tenemos que añadir el css de nuestro cursor, es un simple circulo negro con posición absoluta, le he añadido una transición para cuando le añadamos interacciones se vea con una pequeña transición corta.

.cursor {
            width: 2rem;
            height: 2rem;
            border: solid 2px #000000;
            border-radius: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition: all ease 0.1s;
        }

Ahora que tenemos el css vamos con el javascript para que podamos usar ese círculo como cursor, hacemos una variable con el div del cursor y yo he hecho otra con los li que los usaré como si fueran enlaces.

Al cursor le ponemos una función al moverse que calcula la posición horizontal y vertical del cursor y se lo aplica al div que hemos creado nosotros posicionándolo, por eso es importante que tuviera posición absoluta, si os fijáis el css también tenía un translate, lo que hace ese translate es que la posición del cursor este en el centro del div que hemos creado, si no lo pusiéramos estaría arriba a la izquierda, podéis probarlo si queréis y si no lo queréis en el centro posicionarlo como queráis.

let raton = document.querySelector(".cursor");
let enlaces = document.querySelectorAll("li");
window.addEventListener("mousemove", moveCursor);
function moveCursor(e) {
    raton.style.top = e.pageY + "px";
    raton.style.left = e.pageX + "px";
}

Una vez comprobamos que nuestro cursor está funcionando y está justo donde está el cursor por defecto, tendríamos que quitar el cursor que está por defecto, es muy simple, simplemente quitamos el cursor en toda la web, así de fácil.

*{
    cursor: none;
}

Y por último vamos a añadir el efecto de clicar y de hover yo he hecho una clase en css de como quiero que esté el cursor cuando clique o pase por encima de un elemento que se pueda clicar.

.cursor-click {
    width: 1rem;
    height: 1rem;
    border: solid 3px #27e6bc;
    background-color: hsla(167, 79%, 53%, 0.4);
}
.cursor-hover {
    border: solid 3px #27e6bc;
}

También he aplicado css a los li y un hover para ver cómo interactúa todo en conjunto.

li {
    font-size: 3rem;
    list-style: none;
    margin: 3rem;
    text-align: center;
}
li:hover {
    color: rgb(187, 255, 0);
}

Primero vamos a ver el efecto del click, simplemente hay que añadir dos funciones simples, añadiendo la clase de click al hacer click y quitando-la cuando soltemos el ratón.

window.addEventListener("mousedown", () => {
    raton.classList.add("cursor-click");
});
window.addEventListener("mouseup", () => {
    raton.classList.remove("cursor-click");
});

Ahora añadiremos el hover a los elementos li, podéis añadirlo a lo que queráis, pero si van a ser muchos elementos distintos os recomiendo hacer una clase y añadirla a todos los elementos que queráis que interactúen de esta manera con el cursor.

Simplemente hacemos un for each con todos los elementos y añadimos las 2 funciones como antes, una de over para añadir la clase al estar encima del elemento, y otra de out para quitar esa clase al salir de ese elemento.

enlaces.forEach(function (element) {
    element.addEventListener("mouseover", function () {
        raton.classList.add("cursor-hover");
    });
    element.addEventListener("mouseout", function () {
        raton.classList.remove("cursor-hover");
    });
});

Y ya tendríamos lo básico para que nuestro cursor funcionara, ahora toca intentar hacerlo más personal o a vuestro estilo y probar cosas distintas como añadirle un svg, meter elementos dentro del div cursor y aplicarle algún filtro, pero a partir de aquí ya es cosa de vuestra imaginación.

Os dejo un enlace con el ejemplo y el código Aquí así os será más fácil empezar a probar de personalizar vuestro cursor.

by Nadal Vicens Date: 08-06-2022 cursor raton mouse javascript css personalizado diseño diseño web visitas : 2147

Nadal Vicens

Desde niño apasionado de los videojuegos, gracias a ello me ha interesado la tecnología, y he acabado dentro del mundo de la programación, donde puedo estar horas sin que me de cuenta. Interesado en aprender tanto de la parte de tecnología como de diseño. No podría vivir sin videojuegos, café y pizza.