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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Shek em 02/06/18, 08:41 am

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çãod e 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 Seta Branca Visualização Seta Branca Templates Seta Branca overall_header


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.5.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">CONTEUDO</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 Demontração: https://daneden.github.io/animate.css/


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 Seta Branca Visualização Seta Branca Templates Seta Branca 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.


Aplicação de efeitos animados em CSS com Animate.css
Tutoriais, dicas e astúcias
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17908
Pontos Ativos : 22013

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum