Introdução

Neste tutorial,  vou mostrar como criar uma Animação Interativa dos Olhos usando na animação apenas CSS e JavaScript.

Nesta animação divertida e interativa, os olhos seguem o cursor do seu mouse. Neste tutorial, vamos explorar como realizar essa animação usando HTML, CSS e JavaScript. Não só a animação é cativante e envolvente, mas também incluímos um efeito de piscar para dar um toque realista à interação. Seja você um iniciante ou um desenvolvedor experiente procurando por um novo projeto, esta é uma ótima maneira de praticar e aprimorar suas habilidades de front-end.

Criando o Animação Interativa dos Olhos  em Javascript

Primeiro passo você deverá criar a estrutura da página, para isso crie um arquivo html contendo  o seguinte código :

Logo após crio a estrutura do olho que será animado:

No código acima implementei a parte da estrutura dos olhos que serão animados, foi criado o olho, a pupila e a pálpebra do olho.

Depois adiciono o css responsável pela estilização do olho e pela animação de piscar :

Por ultimo adiciono o script responsável por fazer o olho seguir o ponteiro do Mouse:

Uma breve explicação do código Javascript criado:  

1. Seleção dos Olhos:
   const eyes = document.querySelectorAll('.eye');

   • Seleciona todos os elementos com a classe .eye.
2. Evento de Movimento do Mouse:
   document.addEventListener('mousemove', (event) => {

   • Adiciona o eventomousemove,  para ativar a função sempre que o cursor se move.
3. Otimização com requestAnimationFrame:
   requestAnimationFrame(() => {

   • Reduz a frequência de atualizações para sincronizar com a taxa de quadros do navegador, melhorando o desempenho.
4. Cálculo da Posição do Olho:
   const rect = eye.getBoundingClientRect();
const eyeX = rect.left + rect.width / 2;
const eyeY = rect.top + rect.height / 2;

   • Obtém a posição central de cada olho usando getBoundingClientRect().
5. Cálculo da Direção e Distância:
   const dx = event.clientX - eyeX;
const dy = event.clientY - eyeY;
const angle = Math.atan2(dy, dx);
const distance = Math.min(35, Math.hypot(dx, dy));

   • Calcula a direção (angle) e a distância (distance) do cursor em relação ao centro do olho.
   • Limita a distância máxima a 35 pixels.
6. Movimento da Pupila:
   pupil.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;

   • Move a pupila com base na direção e na distância calculadas, garantindo que ela siga o cursor.

Você pode visualizar a animação no link abaixo:

Interactive Animated Eyes 

Deixo aqui um vídeo curto do processo de criação da animação:

Conclusão

Este projeto não só adiciona um elemento divertido ao seu site, mas também é uma excelente maneira de melhorar suas habilidades em HTML, CSS e JavaScript. Experimente adicionar outros efeitos ou personalizações para tornar a animação ainda mais envolvente.

Código fonte do tutorial  da animação em Javascript:

Código Fonte