Cursors

Hoje em dia existem nos navegadores modernos diversos modelos de cursores diferentes que podem ser utilizados através do atributo cursors do CSS. Os mais comuns de vermos são os default, pointer, crosshair, no-drop e none. Além disso, esse atributo permite também, adicionar imagens no lugar do cursor.

Com essa flexibilidade muita coisa divertida tem sido feita para melhorar a usabilidade ou apenas sacanear usuários com cursores diferentões. Porém, apesar de conseguirmos fazer esse tipo de brincadeira com imagens, não é possível adicionarmos GIFs ou vídeos no lugar do cursor, limitando apenas a imagens estáticas.

Para contornar isso, uma das alternativas é ocultar totalmente o cursor com o atributo cursor: none e através do Javascript adicionar algum componente de forma absoluta nas coordenadas atuais do ponteiro, como no código abaixo:

1
2
3
4
5
6
window.onmousemove = function (e) {
const x = e.clientX;
const y = e.clientY;
myCursor.style.top = (y + 20) + 'px';
myCursor.style.left = (x + 20) + 'px';
};

Esta é a alternativa mais comumente utilizada, mas as vezes perde a performance quando o usuário move o mouse muito rapidamente.

Em uma tentativa de simular um mouse animado, experimentei neste post uma alternativa alterando a imagem constantemente buscando de criar um cursor animado. Este teste por motivos óbvios não irá aparecer em dispositivos touch.

No código abaixo é possível ver como essa gambiarra é feita:

1
2
3
4
5
6
7
8
9
10
let currentCursor = 0;
setInterval(() => {
if (currentCursor < 35) {
currentCursor++;
} else {
currentCursor = 0;
}
const html = document.getElementsByTagName('html')[0];
html.style.cursor = `url('/images/cursors/${currentCursor}.png'), auto`;
}, 50);

Como você pode ver, o seu cursor deve estar mudando de cor constantemente nesta tela, dando a impressão de ser levemente animado.

Por fim deixo aqui uma última sugestão de cursores utilizando as regras de @keyframes do CSS, conforme implementado neste CodePen. Essa alternativa porém possui algumas restrições de navegadores, funcionando no momento somente no Chrome.