[TUTORIAL] Aplicação de efeitos animados em CSS com Animate.css

por Shek 02.06.18 12:41

Aplicação de efeitos animados em CSS com Animate.css

Animate.css é um monte de animações legais, divertidas e entre navegadores para você usar em seus projetos. Ótimo para ênfase, home pages, sliders e geral-adicionar-água-awesomeness.

Aplicação de efeitos animados em CSS com Animate.css

Tutoriais, dicas e astúcias

Edição dos templates

Para este caso, vamos usar a edição de template, permitindo que estes efeitos divertidos com CSS seja aplicado por um arquivo .CSS externo ao seu fórum. Você poderá acessar o projeto no GitHub acessando: https://github.com/daneden/animate.css

Painel de Controle Visualização Templates overall_header

[TUTORIAL] Aplicação de efeitos animados em CSS com Animate.css Cp_tpl10

Localize no template a variável a seguir:

Código:: {CSS}

E abaixo dela, cole uma meta de ligação CSS:

Código:: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />

Feito isso, salve o template e publique!

Instruções para uso

Depois de incluir o link acima, em todo atributo "class", será necessário incluir o nome "animated". Por exemplo:

Código:: <div class="forabg animated NOME_DO_EFEITO">CONTEÚDO</div>

O "animated" deve seguir pelo nome do efeito desejado. Para escolher o efeito, você poderá acessar o projeto no GitHub ou acessar a página de demonstração: https://daneden.github.io/animate.css/

[TUTORIAL] Aplicação de efeitos animados em CSS com Animate.css Demo_a10

No exemplo a seguir, podemos aplicar o efeito FadeIn no fórum, e com isso, toda vez que a página for atualizada, o CSS fará o trabalho de "fadein". Para começar, acesse:

Painel de Controle Visualização Templates overall_header

Em seguida, localize no template o código do corpo do fórum:

Código:: <body

Ao localizar, se esta tag HTML não tiver o "class=''", adicione o seguinte:

Código:: class='animated fadeIn'

Salve e publique seu template.

Vídeo explicativo

Você tem dúvidas? Assista o vídeo tutorial no canal TV Forumeiros! O vídeo abaixo explica os processos deste tutorial, logo, não hesite em criar sua dúvida.

https://youtu.be/YadcBFXB_ac