Cum să adăugați animație CSS3 cool la conținutul dvs. WordPress

Como adicionar animação CSS3 legal ao seu conteúdo WordPress

A arte de contar histórias pode ter começado muito antes que o homo sapiens pudesse falar. Ele evolui conosco e se adapta às ferramentas disponíveis. As histórias que costumavam ser contadas e passadas de uma geração a outra, oralmente, abraçavam a evolução literal dos livros manuscritos à impressão em massa, ao processamento de texto digital e, recentemente, à Internet. Do ponto de vista da evolução humana, parece que não exploramos todo o potencial de todas as tecnologias disponíveis que temos hoje. Embora os vídeos já tenham iniciado suas campanhas de dominação do mundo virtual, a maior parte do conteúdo da web ainda está em texto.

O conteúdo da web moderno deve ser interativo e incorporar várias mídias junto com o bom e velho texto simples. Algumas ferramentas podem nos ajudar a elevar nossa narrativa alguns degraus. E se você for um usuário do WordPress, você pode usar o Anime! plugin para adicionar animações CSS3 legais ao seu conteúdo.

Quais são as possibilidades?

Junto com HTML5, CSS3 é a sigla relacionada ao design moderno da web. Em suma, CSS é o componente da web que permite aos usuários controlar a aparência da página da web, como layout, posição, fonte, cor, etc. Sua encarnação mais recente, CSS3, é inteligente o suficiente para permitir que os usuários criem imagens e animações usando códigos.

Felizmente, você não precisa ser um programador para utilizar CSS3 em seu site WordPress. O Animate It! O plugin permite que você aplique animações CSS3 a Posts, Widgets e Páginas com o clique de um botão no editor. Além disso, os usuários podem controlar os gatilhos. Por exemplo, eles podem aplicar animação em rolar, clicar e pairar, e adicionar deslocamento de rolagem diferente em blocos de animação individuais. O plugin também vem com muitos recursos, como:

  • Mais de 50 animações de entrada, saída e busca de atenção
  • Fornece recurso de atraso e controle de duração na animação para criar uma boa sequência de animação
  • Permitir que os usuários apliquem a animação infinitamente ou qualquer número fixo de vezes
  • Opção para adicionar classes CSS personalizadas a blocos de animação individuais
  • Opções para habilitar ou desabilitar animações em smartphones e tablets

O que você pode fazer com o Animate It! plugar? Você pode adicionar interatividade simples aos seus artigos, criar páginas de vendas atraentes, aprofundar as emoções de suas ficções ou até mesmo criar uma apresentação de negócios poderosa, se desejar. Apenas lembre-se de não exagerar, pois bombardear seu visitante com animação ilimitada não é a melhor maneira de obter leitores fiéis.

Introdução ao Animate It!

Depois de instalar e ativar o plug-in, você pode encontrar o botão para adicionar animação no “Editor do WordPress”. Este botão só aparecerá no modo visual, mas se você aprendeu os comandos, é possível inserir os códigos no modo texto simples (mais sobre isso mais tarde).

animate-mte-add-button

Após pressionar o botão, você verá uma janela de opções. Existem três guias que permitem que você personalize a animação. A primeira guia é “Entrada”. Este é o local para adicionar a animação que entrará na tela em determinadas condições. Quatro opções suspensas o ajudarão a ajustar os efeitos de animação.

  • Animação é o lugar para escolher o tipo de animação que você deseja.
  • Demora irá ajudá-lo a ajustar o tempo antes do início da animação.
  • Duração é sobre quanto tempo a animação será reproduzida do início ao fim. Quanto maior o número, mais lenta será a animação.
  • Cronometragem é a proporção da animação a ser reproduzida por vez. Por exemplo, o efeito “EasyIn” reproduz a animação mais lentamente no início e mais rápido no final.

Você pode verificar as combinações de efeitos jogando-o usando o “Animate It!” botão. Se o resultado for do seu agrado, você pode pressionar o botão “Inserir” para usá-lo em seu conteúdo.

animate-mte-entry

A aba “Sair” é mais ou menos parecida com a Entrada, mas para adicionar uma animação que vai sair da tela. Ao combinar os dois, você pode adicionar um objeto que aparecerá na tela e depois desaparecerá.

animate-mte-exit

A guia “Opções” é onde você controla as configurações gerais da animação. Aqui você pode definir a animação para ser reproduzida em um loop ou apenas uma vez, manter o estado final do elemento, adicionar código CSS personalizado e definir o gatilho que iniciará a animação. Especificamente sobre a trigger – configuração “Animate On” – você pode escolher Scroll, por exemplo, e a animação só começará se a área já estiver visível na tela.

animate-mte-options

Adicionando Seu Conteúdo

Após pressionar o botão “Inserir”, você verá algumas linhas de códigos de acesso adicionados à sua área de conteúdo. Esses códigos de acesso são os que controlarão a animação. E uma vez que são apenas códigos com valores, você pode adicionar os códigos manualmente se for bom com códigos e quiser. No entanto, outras pessoas deveriam ficar com o Animate It! botão.

Você também verá uma linha de texto que diz: “Por favor, adicione seu conteúdo nesta área.”Aqui é onde você pode adicionar os itens que deseja animar. Podem ser textos, imagens, ícones, logotipos, áudios, vídeos ou até mesmo outros códigos de acesso. Tentei adicionar um shortcode de efeito de digitação gerado usando o plugin Typed Js e o resultado é ótimo.

animate-mte-add-your-content

Se há algo que eu poderia dizer sobre o uso do Animate It! plugin, seria “Experiment!” Brinque com ele e experimente diferentes combinações para obter o resultado desejado. É divertido. E aqui está o resultado que vim em menos de um minuto. Eu combinei o Animate It! plugin com o plugin Typed Js.

animate-mte-result

Você acha que está na hora de adicionar elementos interativos ao seu conteúdo da web? Você está planejando experimentar o plugin? Você usa plug-ins diferentes para animação? Por favor, compartilhe usando os comentários abaixo.