Luces en la oscuridad

Extrañas luces en la noche.

La ves, ¿verdad?

(Si estás leyendo esto desde un móvil o tablet solo las vas a ver al hacer “tap” en algún punto de la pantalla).

Para explicar el fenómeno podríamos caer en la tentación de ponernos folclóricos y afirmar que son seres de otros mundos visitándonos gobernándonos, pero la realidad es bastante más prosaica: se trata de un pequeño truco en el que cambiamos el cursor del navegador por seis puntos de luz bailando juntos y que cambian de aspecto al hacer hover sobre algún elemento clicable.

De inicio puede parecer un truco complejo, pero en realidad es muy sencillo. Como en otras muchas ocasiones, todo se reduce a hablarles con cariño a las maquinas.

Making-of

Para explicaros cómo hemos hecho, vamos a utilizar una versión reducida de las luces, con solo una principal y otra siguiéndola:

HTML

Primero creamos dos div. Una para cada luz.

Además de un class específico para cada una, también llevan uno común, .mouse, que vamos a utilizar para aplicarles a ambas la misma funçom de jQuery.

CSS

Después les damos estilo a cada una: tamaño, forma, color de fondo, etc. Tanto para o su aspecto inicial, como para el hover. Y también quitamos el cursor por defecto del navegador.

JavaScript (jQuery)

Por último, susurramos un ligero script al navegador y obramos la “magia”.

Con él lo que conseguimos es, cada vez que movemos el ratón, aplicar (en px) su posición a la posición de nuestras div (top y left).

¿Y por qué la div.follow-cursor persigue a la div.cursor? Esto se logra con la transition: .2s linear; que previamente aplicamos en el CSS a la div perseguidora. De esta forma el cambio de posición será instantáneo en la div.cursor y tardará 0.2s en la div.follow-cursor, creando así la ilusión de persecución.

Recomendación

Si vas a utilizar este efecto en alguna página web, que sea con sentido. Con él podemos estar reduciendo la usabilidad y en pocos casos la forma debería ir por delante de la función. Ante la duda lo mejor es borrar el body * { cursor: none !important; } y dejar que el cursor por defecto del navegador acompañe a nuestras luces.

Ejemplo en directo

Para estudiar/editar cómo hemos hecho, tienes un ejemplo en directo en Codepen .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *