Como criar animação flutuante para seu site no WordPress

A animação flutuante pode ser não apenas um efeito interessante, mas também um indicador visual de que um elemento da página é clicável. Mais frequentemente usado para navegação e menus, também pode aumentar as taxas de cliques para imagens ou botões de call to action.

Você não quer animar tudo um visitante pode passar o ponteiro do mouse, mas usado com moderação, é um bom efeito.

Existem várias maneiras de obter animação instantânea, mas o método mais compatível é via CSS. Ele também normalmente usa a menor quantidade de largura de banda e recursos do navegador. E usar menos recursos é a chave para manter uma boa velocidade de carregamento do site.

A melhor maneira de obter animação flutuante em um site WordPress

Como a maioria das melhorias do WordPress, a melhor maneira de adicionar animação instantânea é com um plugin. Não é apenas a melhor maneira, mas também a mais fácil. Sempre que posso fazer o melhor com facilidade e conseguir uma vitória/vitória, estou a bordo.

Nós vamos usar o Anime-o! plugin para animação flutuante. Ele faz quase tudo que poderíamos pedir e nenhum dos recursos está escondido atrás de um acesso pago. E os efeitos de foco gratuitos no WordPress também são uma vitória.

Ler:  Como escrever um comunicado à imprensa em 2024: dicas para iniciantes

Seja qual for a pergunta, a animação nem sempre é a resposta

Quando um efeito é fácil de conseguir, é fácil usá-lo em excesso. Um pouco de animação geralmente ajuda bastante e não é apropriado para todos os sites. Não quero necessariamente ver uma animação instantânea em um site de notícias ou no site do meu banco. Pode parecer um pouco frívolo em um contexto mais sério.

Também vale lembrar que os efeitos de foco são perdidos para usuários móveis. Portanto, se a maior parte do seu tráfego for de dispositivos móveis, pode não fazer sentido perder tempo com animações instantâneas. Mas está vivo e bem na área de trabalho, então se você tiver um lugar para ele, use-o!

Ok, você está pronto para vê-lo em ação? A primeira parada é a instalação do plugin.

Observação: normalmente eu uso o editor Gutenberg para tutoriais, mas o plugin só funciona no editor “clássico” do WordPress. Se você é usuário do Gutenberg e não deseja alternar entre editores, este plugin não funcionará para você.

Instalando o Animate It! Plugar

Faça login no painel de administração do WordPress.

Na navegação da coluna esquerda, passe o mouse sobre o link “Plugins” e clique no link “Adicionar Novo”.

Na caixa “Pesquisar plug-ins…”, digite “Animate It!”

Ao encontrar o plugin, clique no botão “Instalar agora”.

Agora o plugin está instalado, mas precisa ser ativado antes de poder usá-lo.

Clique no botão “Ativar”.

Isso é tudo que há para fazer. Agora vamos colocar o plugin para funcionar.

Usando o Animate It!

Não há nenhuma configuração necessária. Depois que o plugin estiver instalado, ele estará funcionando e pronto para uso.

Ler:  AMD anuncia 4 novos processadores Ryzen 5000 série C para Chromebook

Você acessa os recursos de animação no editor de páginas e postagens. Está disponível em todas as suas postagens e páginas existentes, mas vou criar uma página do zero.

No editor, você verá um novo Animate It! ícone.

Ao clicar nele, uma janela pop-up é aberta. É aí que você configura a animação instantânea.

Animando Texto

Anime-o! coloque animações em a. Assim, o espaço será inserido acima e abaixo de qualquer coisa que você animar. Isso significa que você não pode animar uma palavra em um parágrafo sem quebrar a formatação do parágrafo. Isso também significa que a animação instantânea começará quando o cursor do visitante pousar em qualquer lugar do.

Primeiro, vamos animar o texto em um

marcação. Selecione o texto do cabeçalho e clique no botão Animate It! ícone.

A janela pop-up “Selecione seu estilo de animação” será aberta.

Existem três guias ou seções, “Entrada”, “Saída” e “Opções”.

Como estamos fazendo uma animação flutuante, usaremos “Entrada”. Isso significa que o efeito começa quando o foco começa. Considerando que escolher “Sair” faria o efeito começar quando o foco sair. Isso não faria muito sentido.

O primeiro passo é escolher que tipo de animação você deseja no menu suspenso “Animação”.

Como você pode ver, existem dezenas de opções. A única maneira de ver o que todos eles fazem é experimentá-los. Felizmente, o plugin irá demonstrar as animações para você.

Selecione o tipo de animação no menu suspenso e clique no botão laranja “Animate It!” botão. O ícone na parte superior da janela pop-up executará a animação.

Não posso mostrar o efeito em uma imagem estática, mas se você estiver tocando em casa, poderá ver.

Para ativar a animação ao passar o mouse, vamos até a aba “Opções”.

Na seção “Animar ativado”, clique no botão “Passar o mouse”.

Por fim, clique no botão “Inserir” para adicionar o código à sua página ou postagem.

Vá até a sua página e passe o mouse sobre o texto e você verá o efeito.

Animando Imagens

Use o mesmo método para fazer animação instantânea em uma imagem. A única diferença é que em vez de selecionar o texto no editor, selecione a imagem.

  • Faça upload de uma imagem ou adicione uma imagem existente da sua biblioteca de mídia à página ou postagem.
  • Selecione a imagem no editor.
  • Clique no botão Animar! ícone.
  • Escolha o tipo de animação no menu suspenso “Animação”.
  • Vá para a guia “Opções” e na seção “Animar ativado”, clique no botão “Passar o mouse”.
  • Clique no botão “Inserir”.

Adicionando animação a widgets

Usando o plugin você também pode adicionar animações aos widgets. Você tem que usar um gerador de classe CSS no site do plugin para fazer isso.

Como você precisa acessar o site deles de qualquer maneira para gerar a classe, vou apenas indicar sua documentação para adicionar animação a um widget. É muito fácil de implementar quando você sabe como configurar a animação para uma postagem ou página.

Animar um widget é um efeito estranho, pois toda a área do widget é animada. Portanto, se você animar, digamos, a área “Postagens recentes” no rodapé ou na barra lateral, toda a seção da página, a área do widget, se moverá.

Você teria que tentar para ver o efeito, mas como eu disse, é estranho. Mas meio estranho, dependendo da animação. Pode haver alguns usos incomuns para isso, isso depende de você.

O que acontece se você desinstalar o Animate It! Plugar

Se você desinstalar o plugin, as animações deixarão de funcionar nas páginas e posts onde foram utilizadas.

Isso porque, como você deve ter notado, o plugin gera shortcodes para fazer a animação. Depois que os dados do plugin acabam, os códigos de acesso param de funcionar. Os próprios códigos de acesso serão exibidos em qualquer lugar em que foram usados, então você terá que removê-los manualmente.

Vivendo no Presente e Caminhando no Futuro

A facilidade com que podemos animar o mouse agora é impressionante quando você pensa no início da web. As animações de “rollover” de Javascript eram volumosas e complicadas, geralmente tornando necessário o uso de imagens para obter um efeito de foco. Então, quando você os implementou, os navegadores de alguns visitantes se recusaram a exibi-los corretamente.

Ah, os bons velhos tempos.

As transições CSS modernas fazem com que os métodos antigos pareçam um episódio de Os Flintstones. Não que haja algo de errado com os Stones, veja bem. Mas não quero usar uma abelha numa concha para raspar o rosto como Fred e Barney fizeram. E não quero usar jQuery para fazer uma animação que o CSS possa fazer em poucas linhas.

Agora você tem o melhor plugin de efeito Hover para WordPress

O que você vai fazer com isso? Existem muitas possibilidades ao seu alcance, mostre-nos como você as utiliza. O plug-in também faz animações que não estão relacionadas ao foco, como disparar ao carregar ou sair da página. Certifique-se de dar uma volta em alguns deles.

Você já implementou moda antiga animações em um site? Você consegue pensar em algum uso para animação flutuante que não discutimos? Deixe-me saber nos comentários.

Novas publicações:

Recomendação