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.
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
Nuevas unidades de ventana gráfica - CSS
'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque…
Container queries: libera el poder de escribir media queries
El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…
¿Por qué no deberíamos usar el color negro?
A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…
Utilidades de los selectores :where y :is
Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…
Crear PDF con Javascript y jsPDF
El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…
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…