Criando um Componente Flutuante do WhatsApp com Animações em React usando CSS Modules

Matheus Alecrim Rocha React8 de abril de 20244 minutos

Neste tutorial, vamos aprender como criar um componente flutuante do WhatsApp utilizando React e animações CSS. O componente será criado com a ajuda de CSS Modules para modularizar e encapsular o estilo CSS, garantindo um código mais organizado e manutenível.

Configuração do Ambiente: Antes de começarmos, certifique-se de ter o ambiente de desenvolvimento React configurado em sua máquina. Se ainda não tiver, você pode instalá-lo seguindo as instruções na documentação oficial do React.

Estrutura do Projeto: No diretório do seu projeto, crie um novo componente chamado WhatsAppFlutuante.js. Este componente será responsável por exibir o botão flutuante do WhatsApp.

WhatsAppFlutuante.js

import styles from "./WhatsAppFlutuante.module.css";





const WhatsAppFlutuante = () => {
  

  
  return (
    

    <div className={`${styles.whatsfloat} ${styles.animated} ${styles.tada} ${styles.whatsanimated}`} >
        
    <a href="https://api.whatsapp.com/send?phone=556536956455&amp;text=Boa noite!" target="_blank"
    rel="noopener noreferrer" >
    
    <img src="https://static.whatsapp.net/rsrc.php/v3/y7/r/DSxOAUB0raA.png" alt="WhatsApp Logo"  
     />
    
    </a>
    </div>

  );
};

export default WhatsAppFlutuante;

Lembrando este numero marcado em negrito não funciona e apenas demonstrativo se você altera e colocar o número valido será redirecionado para o WhatsApp referente ao número.

No arquivo WhatsAppFlutuante.js, escreva o código React para criar o componente flutuante do WhatsApp. Este componente incluirá um link para o WhatsApp e será estilizado usando CSS Modules.

Certifique-se de ter instalado as dependências necessárias. Se estiver usando o Create React App, o suporte para CSS Modules é integrado por padrão. Caso contrário, você pode instalar a dependência css-loader para habilitar o suporte a CSS Modules.

Crie um arquivo CSS chamado WhatsAppFlutuante.module.css para estilizar o componente. Defina as classes CSS necessárias para o estilo do botão flutuante e as animações desejadas.

.whatsanimated{

    cursor: pointer;
        font-size: 16px;
        line-height: 120%;
        color: inherit;
        font-family: Helvetica Neue, Helvetica Neue, Helvetica, Arial, sans-serif;
        font-weight: 400;
        border: 0;
        
       
    }
    .whatsanimated img{
        height: auto;
       width: 100px;
    }

    @keyframes tada {
        0% {
            transform: scale(1);
        }
        10%, 20% {
            transform: scale(0.9) rotate(-3deg);
        }
        30%, 50%, 70%, 90% {
            transform: scale(1.1) rotate(3deg);
        }
        40%, 60%, 80% {
            transform: scale(1.1) rotate(-3deg);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .tada {
        animation-name: tada;
        animation-duration: 1s;
        animation-fill-mode: both;

    }
    
.whatsfloat {
    position: fixed;
    right: 10px;
    bottom: 0;
    z-index: 99;
    transition: all .4s ease-in-out;
}
                                   
    
   
.whatsfloat:hover{scale:1.1} 

Utilize keyframes CSS para definir as animações desejadas. No nosso caso, estamos usando a animação tada para adicionar um efeito de “pulsação” ao botão do WhatsApp quando ele é renderizado.

1. Estilizando o componente flutuante (.whatsanimated):
   • cursor: Define o cursor do mouse como “pointer”.
   • font-size: Define o tamanho da fonte como 16 pixels.
   • line-height: Define a altura da linha como 120%.
   • color: Define a cor do texto como a cor herdada.
   • font-family: Define a família da fonte como “Helvetica Neue, Helvetica, Arial, sans-serif”.
   • font-weight: Define o peso da fonte como 400 (normal).
   • border: Define a borda como 0 (sem borda).
2. Estilizando a imagem dentro do componente (.whatsanimated img):
   • height: Define a altura da imagem automaticamente para manter a proporção original.
   • width: Define a largura da imagem como 100 pixels.
3. Definindo a animação “tada” com keyframes:
   • @keyframes tada: Define a animação “tada” usando keyframes. Esta animação faz a imagem do WhatsApp “pulsar” quando é renderizada.
4. Aplicando a classe de animação (.tada):
   • animation-name: Define o nome da animação como “tada”.
   • animation-duration: Define a duração da animação como 1 segundo.
   • animation-fill-mode: Define como os estilos aplicados antes e depois da animação devem ser aplicados.
5. Estilizando o componente flutuante (.whatsfloat):
   • position: Define a posição do componente como “fixed” para que ele permaneça fixo na tela enquanto a página é rolada.
   • right: Define a distância do componente em relação à borda direita da janela do navegador como 10 pixels.
   • bottom: Define a distância do componente em relação à borda inferior da janela do navegador como 0 pixels.
   • z-index: Define a ordem de empilhamento do componente para que ele fique acima de outros elementos.
   • transition: Define uma transição suave para todas as propriedades com uma duração de 0,4 segundos e um modo de transição de entrada e saída suave.
6. Estilizando o efeito de hover (.whatsfloat:hover):
   • Quando o componente flutuante é hovered, ele aumenta em escala para 1.1x do seu tamanho original, proporcionando um feedback visual ao usuário.

Integre o componente WhatsAppFlutuante em sua aplicação React, posicionando-o conforme necessário.

Neste tutorial, exploramos como criar um componente flutuante do WhatsApp com animações usando React e CSS Modules. Espero que este tutorial tenha sido útil para entender como integrar animações CSS em seus projetos React. Experimente ajustar as animações e estilos conforme necessário para personalizar o componente de acordo com suas preferências.

Este componente estará funcionando no meu polifólio se interessa ver e só dar uma passa e olhar potifolioReact.