Como criar efeitos de cursor animado com JavaScript

Aprenda a criar efeitos de cursor animado com JavaScript

Cursores animados viraram tendência esse ano, eu mesmo usei em vários projetos nos últimos meses. Por isso, hoje decidi trazer mais um tutorial feito pelo incrível time de designers da Codrops. Você pode ver o tutorial original (em inglês) clicando aqui.

São cinco efeitos animados — nessa aula estaremos usando a Demo 4. A integração foi feita com Paper.js e Simplex Noise.

Veja a demo

A chamada para o cursor

O markup será dividido em dois elementos. Uma <div> bem simples pra esse pontinho branco e um elemento <canvas> pra desenhar aquela borda animada.

Personalizando o layout

Pra dar um pouco de vida pra nossa demo, iremos definir o estilo do nosso layout usando CSS.

O estilo do cursor

Entenda, é bem simples: os dois elementos do cursor terão uma posição fixa. Dessa maneira, é só configurar eles pra que fiquem no ponteiro do mouse. O canvas irá fazer todo o processo.

Os links

Pra gente não perder tempo, vamos criar um link junto com um ícone SVG pra que possamos animar quando passar em cima. Lembrando que aqui é apenas um exemplo, você pode se inspirar nessa aula pra criar coisas fantásticas. A falta de energia elétrica é o limite.

Estilo dos links e seus efeitos de transição

Aqui iremos definir os estilos de navegação e também os itens de transição dos links.

Adicionando o Paper e o SimplexNoise

Como eu disse antes, nós iremos usar o Paper.js. Pra fazer aquele efeito animado na borda, usaremos o Simplex Noise.

Ocultando o cursor padrão

Como estamos criando nosso próprio cursor animado, meio que precisamos esconder o cursor do sistema, né? 🙂

Animando o cursor

Aqui iremos colocar aquele efeito suave no cursor, pra isso usaremos o requestAnimationFrame()-loop.

Configurando a borda no Canvas

Agora iremos configurar aquela bordinha que tem em volta do pontinho branco. Pra fazer ela se mover daquela maneira, usaremos uma coisa chamada interpolação linear.

Configurando o estado hover

Animando a borda

Abaixo temos a versão estendida do método paper.view.onFrame mencionado acima.

Considerações finais

Como o grande Stefan disse, criar efeitos de cursor animado é uma ótima maneira de brincar com JavaScript. Mas venho te lembrar que você deve usar com moderação, não vá exagerar nos efeitos pois pode deixar seu sistema lento.

Ah, se você gostou desse tutorial, agradeça ao Stefan no twitter, o projeto original (em inglês) foi disponibilizado por ele.

E aí dev, deu certo? Gostou? Deixa um feedback nos comentários. 😀

Clique aqui para baixar os arquivos usados neste tutorial.

Após anos de experiência em criação web, resolvi compartilhar dicas sobre a carreira em uma agência de desenvolvimento. — https://studioromes.com

Após anos de experiência em criação web, resolvi compartilhar dicas sobre a carreira em uma agência de desenvolvimento. — https://studioromes.com