Como adicionar um cursor personalizado ao seu site

O que é um cursor personalizado?

Um cursor personalizado é uma alteração intencional no ícone padrão que pisca para mostrar para onde o mouse está apontando ou para onde você está pronto para digitar. Em vez de uma linha entediante piscando, você pode adicionar cor, passar o mouse sobre animações ou adicionar efeitos de clique. Em um computador, você pode alterar o cursor padrão por meio das configurações. Para uma página da web, você precisa de um pouco de HTML, CSS e JavaScript. Não deixe isso intimidar você.

Qual é a finalidade de um cursor personalizado?

Um cursor personalizado torna seu site único. Os cursores personalizados orientam os visitantes a interagir com a página da internet com setas, mensagens de ajuda, guias, barras de progresso e assim por diante. Um cursor personalizado substitui o cursor padrão usado pelo navegador do seu visitante para tornar a página mais interessante e ajudar os usuários a entender o que acontecerá se clicarem em um link ou arrastarem um objeto.

Sim. Um cursor personalizado é seguro. No entanto, só porque um cursor CSS é seguro não significa que seu visitante saberá disso. É possível que muita criatividade faça um usuário hesitar.

Por exemplo, se você usar muita animação ou piscadas quando um visitante mover o mouse, isso pode fazê-lo pensar que algo está errado. Lembre-se de que o objetivo de um cursor personalizado é guiar e se comunicar com o usuário. Se a análise da web mostrar que os clientes estão fechando seu site com frequência após adicionar personalização, você pode querer retroceder em algumas das alterações.

Embora os cursores personalizados sejam seguros, você precisa ter muito cuidado ao baixar cursores de diferentes sites. Em geral, nunca é seguro baixar códigos ou arquivos de sites que você não conhece. Antes de baixar um cursor personalizado de um site que oferece downloads gratuitos, faça algumas pesquisas para garantir que a página tenha uma reputação sólida. Melhor ainda, continue lendo para ver como fazer um cursor CSS por conta própria que atenderá às suas necessidades. São apenas algumas linhas de código que você pode fazer, mesmo que seja um iniciante.

Como personalizar o cursor no meu site?

Há duas maneiras principais de criar um cursor de mouse personalizado. Você pode usar CSS ou JavaScript. Antes de adicionar CSS ou JavaScript, você precisará navegar até o script CSS que deseja modificar. Se você estiver usando o criador de páginas da web da MailChimp, vá para o painel Add and Edit Web Page Sections (Adicionar e editar seções) da página da web no Construtor de páginas da web da MailChimp.

Não se intimide. É uma mudança simples. Veja como:

1. Em seu painel de controle do site, clique em Edit Site (Editar site).
2. Procure a página com a qual deseja trabalhar e clique em Edit Page (Editar página).
3. No criador de sites da Mailchimp, clique no painel Sections (Seções). O painel será expandido para mostrar as seções na sua página da web.
4. Passe o mouse sobre qualquer seção no painel para visualizar essa área da página.
5. Clique na seção onde deseja personalizar o cursor para ver as opções de estilo.
6. Clique em editar para abrir a seção e fazer suas alterações no código CSS.

Como criar um cursor personalizado usando o CSS

O CSS tem uma propriedade para personalizar o cursor. Você pode usar a propriedade do cursor na seção do corpo do CSS para tornar o ponteiro do mouse mais interessante. Você precisará de uma imagem no formato PNG, JPEG ou SVG. Em seguida, use o seguinte snippet de código no CSS da seção que você deseja personalizar para alterar o ponteiro para um gráfico de sua escolha:

body { cursor: url(‘YourCursorImage.png'), auto; }

A propriedade do cursor permite especificar qual dos muitos cursores será exibido. O “auto” padrão deve ser listado por último. Isso permite que o navegador do usuário exiba seu cursor padrão se nada mais funcionar.

Abaixo está uma tabela de algumas de suas opções que estão disponíveis com o CSS. Use a sintaxe:

cursor: value, auto;

Por exemplo, se você quiser tornar o cursor do mouse um círculo azul mostrando o usuário para esperar, use a declaração abaixo. Adicionar “auto” no final da declaração dá ao navegador uma opção de fallback caso ele não saiba interpretar esse valor específico.

cursor: progress, auto;

Estes são apenas alguns dos centenas de valores que você pode usar com a propriedade do cursor CSS. Para obter uma lista mais completa, consulte a página do desenvolvedor Mozilla.

Personalizar cores também é uma ótima maneira de tornar seu cursor CSS interessante, especialmente se você fizer as cores corresponderem às diretrizes da sua marca. Você pode alterar a cor ou o tamanho no script CSS. Apenas tenha cuidado para não tornar o ponteiro do mouse muito grande ou difícil de ver em relação ao fundo da sua página.

Como criar um cursor personalizado usando JavaScript

Você precisa alterar o DOM para personalizar o cursor em JavaScript. A primeira etapa é criar uma divisão no código HTML:

<div class="cursor pointed"></div>

Depois de definir a seção div, você pode usar instruções JavaScript para fazer com que seu cursor personalizado faça o que quiser com um evento de movimento do mouse. (Essa é apenas uma maneira chique de dizer quando o usuário move o mouse ou clica em algum lugar da sua página.) Você precisará do CSS para ocultar o cursor padrão e definir as coordenadas X e Y. Aqui está uma amostra da sintaxe que você precisará.

body{ background-color: #1E1C44; cursor: none; }

.pointed{ width: 12px; height: 12px; background-color: red; border-radius: 25%; }

window.addEventListener('mousemove', moveCursor)

Observação: Use o valor “none” para a propriedade do cursor para ocultar o cursor padrão e mostrar o seu. O ouvinte do evento responderá sempre que um visitante do seu site mover o cursor do mouse.

Cursor personalizado para Chrome

O Chrome é o navegador da web mais popular, então vamos começar com os plug-ins de cursor personalizados do Chrome. Há cerca de cem opções gratuitas, incluindo Minecraft, sabres de luz e desenhos animados.

Se quiser, você pode até mesmo usar sua própria imagem como cursor, desde que ela atenda às diretrizes de tamanho. Idealmente, use um gráfico de 16 x 16 ou 32 x 32 pixels. É possível usar uma imagem de até 128 por 128, mas tente os tamanhos menores primeiro. Para uma visualização ideal, o Chrome recomenda uma imagem com um fundo claro. (Se o histórico não estiver claro, ele cobrirá parte do seu site). A extensão está disponível gratuitamente na Chrome Web Store do Google. Depois de instalar a extensão, você precisará atualizar sua página da web.

Há algumas limitações importantes para o Cursor Personalizado para Chrome. Primeiro, ele não funcionará na maioria das páginas da loja. Em segundo lugar, limita-se à navegação no Chrome. Portanto, a extensão do Chrome não é ideal para web designers, mas é uma maneira rápida de ver como diferentes ponteiros de mouse serão exibidos em seu site.

Quais navegadores suportam cursores CSS e cursores de mouse personalizados?

Todos os navegadores modernos sabem como suportar um cursor CSS personalizado. Se um usuário estiver usando um navegador mais antigo, o “automático” no final da sintaxe permitirá que ele veja o cursor padrão para esse navegador.

Navegadores compatíveis com propriedade CSS Cursor:

• Apple Safari 1.2 e posterior
• Firefox - todas as versões
• Google Chrome - todas as versões
• Internet Explorer 4.0 e posterior
• Opera 7 e posteriores

Fazer um site se destacar com um cursor personalizado. Personalizar o cursor é apenas uma das muitas maneiras de tornar sua página da web mais interativa e interessante. Ao tornar seu site amigável e intuitivo, você vai atrair e manter os visitantes. Não tenha medo de experimentar e deixe sua criatividade brilhar!