Animações com WOW.js e Animate.css

Recentemente minha criatividade foi colocada a prova através do desafio de inovar a maneira como apresentar os elementos dentro de um website. Eu não sou designer e neste assunto tenho opiniões que com toda certeza devem ser reavaliadas antes de serem implementadas. Minha sensibilidade para visual/usabilidade precisa ser trabalhada, mas algo que sempre me orgulhei da minha criatividade.

Então para dar um tapa no site, tive a ideia de colocar algumas animações nos elementos. Então comecei a procurar na internet um jeito bacana de se fazer isso. Me deparei com muitas tecnologias e experimentei uma série de coisas, mas o que melhor funcionou (e que eu mais gostei também), foi da simplicidade funcional da combinação do animate.css com a biblioteca wow.js.

Vou te explicar como em apenas dois minutos, você também pode animar os elementos do seu site com essa dupla dinâmica.

A dupla dinâmica está aqui para nos salvar!

Animate.css

O Animate é o grande astro por trás de toda a magia que vocês estão prestes a testemunhar neste artigo. O Animate.css é um projeto idealizado por Daniel Eden — atualmente designer de produto no Facebook. Como diz em sua descrição no GitHub, o projeto é uma série de animações legais, leves e divertidas para você usar nos seus projetos. Na sua página oficial, temos uma demo de todas as animações que podemos colocar nos nossos elementos. São mais de 30 animações muito bem feitas.

Animações são super legais!

O bacana deste projeto é realmente muito fácil inseri-lo nos nossos projetos. O primeiro passo é colocá-lo na nossa página por meio de um CDN ou baixando a biblioteca:

<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"></head>

Feito isso, basta você selecionar um elemento do seu HTML e adicionar a classe CSS animated acompanhada do nome da animação. Como por exemplo:

<h1 class="animated infinite bounce">Example</h1>

E está feito! Se não acredita em mim, dá uma olhada aqui. Podemos configurar a duração da animação, delay e iteração através das propriedades: animation-duration, animation-delay e animation-iteration-count respectivamente.

Bem simples e fácil né? Só que há um pequeno problema… Como podemos fazer para que as animações somente ocorram quando o usuário realmente estiver no elemento? É ai que entra o WOW.js.

WOW.js

Essa biblioteca javascript nos auxilia a criar animações que acontecem de acordo com o scroll do usuário no nosso site. Ela se casa muito bem com o animate.css e nos permite configurar uma série de atributos.

Os primeiros passos são:

  1. incluir a biblioteca no seu projeto
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>

Feito isso, basta incluir a classe wow no elemento que você quer animar, acompanhado com o nome da animação (vinda do animate.css). Como por exemplo:

<h1 class="wow bounce">Example</h1>

Podemos configurar vários atributos:

  1. data-wow-duration: Duração da animação

Há uma porrada de configurações possíveis, basta dar uma olhada na documentação oficial.

Conclusão

As possibilidades da combinação destas duas ferramentas são infinitas. É possível fazer uso de outras bibliotecas, como por exemplo o jQuery, para adicionar animações de forma dinâmica aos elementos. Sua criatividade é o limite.


Versão em vídeo

Se gostou deste artigo, dê uma olhada no nosso vídeo sobre o assunto!

Gostou deste artigo? Recomende 👏, comente e compartilhe!

Siga-nos nas redes sociais e não perca as novidades! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

)

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade