Criando animações em seu site com animate.css

Animete.css é uma biblioteca CSS criada especialmente para criar pequenos efeitos em páginas e aplicativos. Alguns exemplos de animações podem ser testadas no próprio site da animate.css.

 

Tutorial de como usar a biblioteca animate.css

  1. Crie uma nova página HTML (Pode usar BootStrap se quiser ?).
  2. Acrescente no cabeçalho do documento (dentro das tabes <HEAD> e </HEAD>) o endereço CDN do animate.css
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  3. A estrutura do documento ficará assim;
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Minha página animada</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
    <body>
    
    </body>
    </html>

Manipulando as animações com DOM

  1. Crie um paragrafo e atribua um id para ele e atribua também a classe animeted, por exemplo;
    <p id="texto" class="animated" onclick="Animar()">Olá! Eu sou um texto animado. Clique aqui para ver!</p>
    

    A classe animated pertence ao animate.css e deve ser usada sempre que quiser animar um elemento.

  2. Agora crie uma função JS que irá manipular este elemento com DOM (Document Object Model). Utilize o seguinte código:
    <script>
     function Animar() {
     var d = document.getElementById("texto");
     d.className += " bounceOutLeft";
     }
    </script>
  3. O código completo ficará assim;
    <!DOCTYPE html>
    <html lang="pt-br">
    <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Minha página animada</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    </head>
    
    <body>
     <p id="texto" class="animated" onclick="Animar()">Olá! Eu sou um texto animado. Clique aqui para ver!</p>
    
    <script>
     function Animar() {
     var d = document.getElementById("texto");
     d.className += " bounceOutLeft";
     }
     </script>
    </body>
    </html>
  4. Agora, veja o resultado! Teste você mesmo clicando sobre o parágrafo.
  5. Você pode substituir a classe bounceOutLeft por qualquer outra deste quadro;
    Class Name
    bounce
    flash
    pulse
    rubberBand
    shake
    headShake
    swing
    tada
    wobble
    jello
    bounceIn
    bounceInDown
    bounceInLeft
    bounceInRight
    bounceInUp
    bounceOut
    bounceOutDown
    bounceOutLeft
    bounceOutRight
    bounceOutUp
    fadeIn
    fadeInDown
    fadeInDownBig
    fadeInLeft
    fadeInLeftBig
    fadeInRight
    fadeInRightBig
    fadeInUp
    fadeInUpBig
    fadeOut
    fadeOutDown
    fadeOutDownBig
    fadeOutLeft
    fadeOutLeftBig
    fadeOutRight
    fadeOutRightBig
    fadeOutUp
    fadeOutUpBig
    flipInX
    flipInY
    flipOutX
    flipOutY
    lightSpeedIn
    lightSpeedOut
    rotateIn
    rotateInDownLeft
    rotateInDownRight
    rotateInUpLeft
    rotateInUpRight
    rotateOut
    rotateOutDownLeft
    rotateOutDownRight
    rotateOutUpLeft
    rotateOutUpRight
    hinge
    jackInTheBox
    rollIn
    rollOut
    zoomIn
    zoomInDown
    zoomInLeft
    zoomInRight
    zoomInUp
    zoomOut
    zoomOutDown
    zoomOutLeft
    zoomOutRight
    zoomOutUp
    slideInDown
    slideInLeft
    slideInRight
    slideInUp
    slideOutDown
    slideOutLeft
    slideOutRight
    slideOutUp

 

Manipulando as animações com jQuery

Se você gosta de usar jQuery, a programação se torna ainda mais simples, pois o jQuery possui o método

  1. Acrescente no cabeçalho do documento (dentro das tabes <HEAD> e </HEAD>) o endereço CDN do jQuery.js
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  2. Reescreva a função Animar() substituindo o document.getElement pelo seletor do jQuery que é cifrão $, ficando assim:
    <!DOCTYPE html>
    <html lang="pt-br">
    
    <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Minha página animada</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    </head>
    
    <body style="background-color: lightblue;">
     <p id="texto" class="animated" onclick="Animar()">Olá! Eu sou um texto animado. Clique aqui para ver!</p>
    
    <script>
     function Animar() {
     $('#texto').addClass('bounceOutLeft');
     }
     </script>
    </body>
    </html>
  3. Por fim, o resultado final será exatamente o mesmo que o anterior.

 

Dica monstro: Nesta aula vimos como exemplo a implementação de uma animação em um parágrafo, no entanto, a animação pode ser aplicada em qualquer elemento HTML que possa ser manipulado por DOM ou jQuery. Isso significa que você também pode aplicar animações em DIVs, imagens, botões, listas, menus, formulários, títulos, etc…