Como fazer um cursor de mouse personalizado com CSS ou JavaScript

Agora estamos mais ou menos calmos quando se trata de ga-analytics#sendElementsClickEvent”>web design, mas isso não significa que não podemos mais ter recursos divertidos em nossos sites. Neste tutorial, veremos como fazer um cursor personalizado e adicionar um toque pessoal a qualquer site, primeiro usando uma abordagem somente CSS e, depois, 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 integradas e também nos permite definir uma imagem como cursor.

Nosso código CSS se parece com isto:

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

}

1. url(): A função url é usada para definir o arquivo de imagem para um cursor, desde que esteja em um formato apropriado e com no máximo 128px por 128px. Em nosso elemento principal, definimos o cursor como um .svg enquanto usamos um .cur arquivo em nosso elemento de contêiner hover.
2. 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 8 para garantir que o cursor do nosso círculo esteja no ponto médio de onde o mouse está apontando.
3. Cair pra trás: O valor de fallback é a última palavra-chave no final da nossa propriedade cursor. O fallback é definido como um dos valores de palavra-chave cursor incorporados e é usado se a imagem na url não puder ser carregada.

E isso é tudo sobre como definir um cursor personalizado com CSS!

2. Adicionando um cursor personalizado com JavaScript

Se quisermos que nosso cursor tenha ga-analytics#sendElementsClickEvent”>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

 id="custom-cursor">

2

Em seguida, estilizamos nosso CSS de cursor personalizado. Podemos passar qualquer imagem ou propriedade de estilo para o elemento cursor para que ele fique 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

}

Um toque de cor

Podemos adicionar um pouco de diversão colorida 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á pairando.

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 do 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 já definimos o estilo, vamos definir a funcionalidade do cursor com JavaScript.

Nossa funcionalidade cuidará do posicionamento do cursor personalizado com base no movimento do mouse e também na interação do cursor com elementos na 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 interagir 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 a ser usada quando o hover-container estiver sendo passado pelo mouse (e dessa forma não teremos que anexar outro ouvinte de evento ao elemento).

Veja como fica o 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

})

Encerrando

E com isso, além do nosso cursor CSS simples, criamos uma versão leve de um cursor personalizado interativo, usando apenas JavaScript puro.

Links úteis para cursores de mouse personalizados

Quer levar seu web design para o próximo nível? Um cursor personalizado pode adicionar um toque único e melhorar a experiência do usuário.

Descubra recursos valiosos para dominar esse elemento de design e elevar a personalidade do seu site.