Agora estamos mais ou menos calmos quando se trata de web design, mas isso não significa que não podemos mais ter recursos divertidos em nossos sites. Neste tutorial, veremos como adicionar um toque pessoal a qualquer site usando um cursor personalizado, primeiro usando uma abordagem somente CSS e, em seguida, um método JavaScript mais interativo.
1. Adicionando um Cursor Personalizado com CSS
Nesta demonstração, implementamos dois cursores diferentes em uma página usando apenas CSS. Passe o mouse sobre a caneta para ver o que acontece:
A propriedade CSS cursor nos permite alterar nosso cursor para palavras-chave incorporadas e também nos permite definir uma imagem como o cursor.
Nosso código CSS é mais ou menos assim:
1 |
main { |
2 |
cursor: url("data:image/svg+xml,%3Csvg xmlns="https://www.w3.org/2000/svg" height="16" width="16" style="fill-rule:evenodd;text-rendering:geometricPrecision;image-rendering:optimizeQuality;clip-rule:evenodd;shape-rendering:geometricPrecision" xml:space="preserve" viewBox='0 0 7.5 7.5'%3E%3Cpath d='M0 3.8a3.7 3.7 0 1 1 7.5 0 3.7 3.7 0 0 1-7.5 0zm.5 0a3.3 3.3 0 1 0 6.6 0 3.3 3.3 0 0 0-6.6 0zm2.9 0c0 .2.2.3.4.3a.4.4 0 1 0-.4-.3z' style="fill:currentColor;stroke:currentColor;stroke-width:.0419595"/%3E%3C/svg%3E") 8 8, pointer; |
3 |
}
|
4 |
|
5 |
.hover-container { |
6 |
cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1021.cur), default; |
7 |
}
|
-
url(): A função url é usada para definir o arquivo de imagem para um cursor, desde que esteja em um formato apropriado e no máximo 128px por 128px. Em nosso elemento principal, definimos o cursor como um.svgenquanto usamos um.curarquivo em nosso elemento de contêiner flutuante. -
Coordenadas: Os valores das coordenadas x e y são colocados após a função url para especificar de qual ponto o cursor deve começar. Por padrão, as imagens do cursor são colocadas no canto superior esquerdo de onde o cursor do mouse estaria. Em nosso elemento principal, definimos as coordenadas x e y para
8 8para garantir que o cursor do círculo esteja no meio de onde o mouse está apontando. - Cair pra trás: o valor de fallback é a última palavra-chave no final de nossa propriedade de cursor. O fallback é definido como um dos valores de palavra-chave do cursor integrado e é usado se a imagem no URL não puder ser carregada.
E isso é tudo para definir um cursor personalizado com CSS!
2. Adicionando um Cursor Personalizado com JavaScript
Se quisermos que nosso cursor tenha mais interatividade com nossa página da web, podemos configurá-lo usando JavaScript. Passe o mouse sobre a caneta para ver como o cursor muda:
Para fazer isso, primeiro precisaremos de um elemento HTML para atuar como nosso cursor interativo.
1 |
|
2 |
|
Em seguida, estilizamos nosso elemento de cursor personalizado CSS. Podemos passar qualquer imagem ou propriedade de estilo para o elemento do cursor para torná-lo exatamente como queremos. Neste tutorial, estilizaremos um círculo simples e usaremos o ::after pseudo elemento para formar um ponto no meio. Aqui está o estilo CSS:
1 |
#custom-cursor { |
2 |
width: 2px; |
3 |
height: 2px; |
4 |
border-radius: 50%; |
5 |
background-color: white; |
6 |
position: fixed; |
7 |
pointer-events: none; |
8 |
top: 0; |
9 |
}
|
10 |
|
11 |
#custom-cursor::after { |
12 |
content: ""; |
13 |
border-radius: 50%; |
14 |
position: absolute; |
15 |
top: -8px; |
16 |
left: -8px; |
17 |
border: 1px solid white; |
18 |
width: 16px; |
19 |
height: 16px; |
20 |
}
|
É importante que nosso cursor personalizado tenha o
position: fixed e pointer-events: none propriedades. Isso é para garantir que o cursor esteja sempre posicionado na página pelos movimentos do mouse e que não possamos interagir com o elemento do cursor.
Um toque de cor
Podemos adicionar algumas cores divertidas ao nosso cursor usando o mix-blend-mode propriedade. Isso dará ao cursor um efeito de cor invertida com base no plano de fundo sobre o qual ele está passando.
1 |
#custom-cursor {
|
2 |
width: 2px; |
3 |
height: 2px; |
4 |
border-radius: 50%; |
5 |
background-color: white; |
6 |
position: fixed; |
7 |
top: 0; |
8 |
mix-blend-mode: difference; |
9 |
} |
Isto é o que temos até agora:
Ocultar o Cursor Original
Em seguida, queremos ocultar nosso cursor regular e mostrar apenas o elemento de cursor personalizado quando a página estiver sendo passada:
1 |
body { |
2 |
cursor: none; |
3 |
}
|
4 |
|
5 |
body:hover #custom-cursor { |
6 |
opacity: 1; |
7 |
}
|
8 |
|
9 |
#custom-cursor { |
10 |
width: 2px; |
11 |
height: 2px; |
12 |
border-radius: 50%; |
13 |
background-color: white; |
14 |
position: fixed; |
15 |
top: 0; |
16 |
mix-blend-mode: difference; |
17 |
opacity: 0; |
18 |
}
|
Adicionando a mágica do JavaScript
Agora que resolvemos o estilo, vamos definir a funcionalidade do cursor com JavaScript.
Nossa funcionalidade irá lidar com o posicionamento do cursor personalizado com base no movimento do mouse e também na interação do cursor com os elementos da página.
O código para atualizar a posição do cursor é:
1 |
const customCursor = document.getElementById('custom-cursor'); |
2 |
|
3 |
const updateCursorPosition = (event) => { |
4 |
customCursor.style.top = `${event.clientY}px`; |
5 |
customCursor.style.left = `${event.clientX}px`; |
6 |
}
|
7 |
|
8 |
window.addEventListener('mousemove', (event) => { |
9 |
updateCursorPosition(event) |
10 |
})
|
Nós usamos o clientX e clientY valores para definir as coordenadas do cursor sempre que o mouse for movido.
Também podemos atualizar o estilo do cursor sempre que ele interage com um elemento. Adicionaremos uma classe de zoom ao elemento cursor quando ele passar o mouse sobre o elemento hover-container.
Vamos atualizar nosso CSS para incluir estilo para a classe zoom:
1 |
#custom-cursor { |
2 |
width: 2px; |
3 |
height: 2px; |
4 |
border-radius: 50%; |
5 |
background-color: white; |
6 |
position: fixed; |
7 |
top: 0; |
8 |
opacity: 0; |
9 |
pointer-events: none; |
10 |
mix-blend-mode: difference; |
11 |
transition: transform 500ms; |
12 |
}
|
13 |
|
14 |
#custom-cursor.zoom { |
15 |
transform: scale(3); |
16 |
}
|
Podemos usar o .matches() função para o alvo quando o contêiner flutuante estiver sendo sobrevoado (e dessa forma não teremos que anexar outro ouvinte de evento ao elemento).
Aqui está a aparência do código JavaScript final:
1 |
const customCursor = document.getElementById('custom-cursor'); |
2 |
const hoverContainer = document.querySelector('.hover-container'); |
3 |
|
4 |
const updateCursorPosition = (event) => { |
5 |
customCursor.style.top = `${event.clientY}px`; |
6 |
customCursor.style.left = `${event.clientX}px`; |
7 |
}
|
8 |
|
9 |
window.addEventListener('mousemove', (event) => { |
10 |
updateCursorPosition(event) |
11 |
|
12 |
if (hoverContainer.matches(':hover')) { |
13 |
customCursor.classList.add('zoom') |
14 |
} else { |
15 |
customCursor.classList.remove('zoom') |
16 |
}
|
17 |
})
|
Conclusão
E com isso, além do nosso cursor CSS simples, construímos uma versão leve de um cursor customizado interativo, usando apenas JavaScript vanilla.
Links Úteis do Cursor do Mouse Personalizado
