Luzes no escuro

Estranhas luzes na noite.

Vê-las, nom é?

(Se estás a ler isto desde um móvel ou tablet só as vás ver se fas “tap” nalgum ponto da tela).

Para explicar o fenómeno poderíamos cair na tentaçom de abraçarmos o folclore e afirmar que som seres doutros mundos a nos visitar governar, mas a realidade é bem mais prosaica: trata-se dum pequeno truque no que trocamos o cursor do navegador por seis pontos de luz a dançar juntos e que mudam de aspeto ao fazer hover sobre algum elemento clicável.

Num primeiro momento pode parecer um truque complexo, mas na realidade é bem singelo. Coma moitas outras vezes, tudo se reduz a lhes falar com carinho às maquinas.

Making-of

Para vos explicar como fizemos, vamos utilizar umha versom reduzida das luzes, somente com umha principal e outra a segui-la:

HTML

O primeiro é criarmos duas div. Umha para cada luminária.

Além dum class específico para cada umha, tamém levam um comum, .mouse, que vamos utilizar para lhes aplicar a mesma funçom de jQuery.

CSS

Depois damos-lhe estilo a cada umha: tamanho, forma, cor de fundo, etc. Tanto para o seu aspeto inicial, como para o hover. E tamém apagamos o cursor por defeito do navegador.

JavaScript (jQuery)

Já por último, sussurramos um ligeiro script ao navegador e obramos a “magia”.

Com ele o que conseguimos é, cada vez que movemos o mouse, aplicar (em px) a sua posiçom à posiçom das nossas div (top e left).

E o facto da div.follow-cursor persiguir a div.cursor? Isso logra-se com a transition: .2s linear; que previamente aplicamos no CSS à div perseguidora. Deste jeito a mudança de posiçom será instantânea na div.cursor e tardará 0.2s na div.follow-cursor, criando a ilusom de perseguimento.

Recomendaçom

Se vás utilizar este efeito nalgum site que seja com bom senso, com ele podemos estar a minguar a usabilidade e em poucos casos a forma deveria ir por diante da funçom. Perante a dúvida melhor é removermos o body * { cursor: none !important; } e deixar que o cursor do navegador acompanhe o nosso.

Exemplo ao vivo

Para estudar/editar como é que fizemos tens um exemplo ao vivo no Codepen .

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *