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

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

Principal Contribuidor

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

Mensagem 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.


Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos