Netlivre
Soluções em Tecnologia

Telefone: (61) 3546-1463
E-mail: contato@netlivre.net

SEPS Q 705/905 Bloco A Loja 25 - Asa Sul, Brasília - DF, 70390-055

Mostrar no Google Maps

Graças ao CSS3, você pode criar algumas animações malucas na web. Eles podem funcionar em todos os navegadores e elementos de página para controlar itens de navegação, menus suspensos, guias, o nome dele.

Na verdade, você pode até gerar esses códigos dinamicamente usando ferramentas de animação disponível na web. Mas esses são bastante limitados em comparação com uma biblioteca de animação completa.

Wicked CSS é a mais nova biblioteca do gênero. Isso me lembra dos primeiros Animate.css que eram bastante simples e rudimentares , mas que poderiam ser usados ​​em praticamente qualquer site.

Dê uma olhada na página inicial para uma demonstração ao vivo, juntamente com uma lista de todas as animações suportadas. Ao escrever este artigo, eu conto o total de 24 estilos de animação de slides para rotações e efeitos de pulsação / salto.

Muitas dessas animações são recursos únicos usados ​​para exibir um elemento (ou fora de exibição). Isso é útil para páginas com animações de rolagem para visualização que segmentam elementos de página específicos.

Mas você também pode usar isso para mostrar (ou ocultar) itens de página extras, como menus suspensos, barras de pesquisa, formulários de inscrição ocultos ou qualquer outra coisa. Aqui está uma pequena lista de animações que você pode escolher:

  • Mexe
  • Zoom in / out
  • Deslize para cima / baixo
  • Desvanecer-se
  • Rolando dentro / fora
  • Bounce e pop
  • Rotação circular in / out

Todos esses estilos de animação são projetados para um único uso. Eles podem ser chamados várias vezes por página e por elemento, mas não repetem animações .

Em vez disso, você os usará com base no efeito de clicar, passar o mouse ou percorrer de um usuário. Eles também podem ser usados ​​nos botões do CTA para efeitos pulsantes / pulsantes, mas isso requer uma função de temporização do JavaScript.


Dê uma olhada na página de exemplos para uma visualização ao vivo e mais alguns detalhes. Você também encontrará documentação completa no site principal junto com o repositório do GitHub.

O Wicked CSS é uma nova biblioteca, por isso ainda não tem muitos seguidores. Mas a biblioteca é estável e provavelmente estará por muitos anos.

Fonte: Por Jake Rocheleau

 

Pin It