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 : 724  
 
Nadal Vicens

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.

 
 
 

Artículos relacionados

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

Herramientas alternativas de diseño web open source

Hay muchas herramientas de creación de prototipos, de diseño de interfaz de usuario o aplicaciones de gráficos vectoriales. Pero la mayoría son de pago o de código cerrado. Así que…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

El diseño gráfico y su impacto en el desarrollo web

En el artículo de hoy explicaremos el concepto de diseño gráfico, sus fundamentos y lo que aporta al desarrollo web. El diseño gráfico se aplica a todo lo visual, lo…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración