0 Compartilhamentos 311 Views

Mais 19 efeitos de animação em Jquery

24 de setembro de 2015

Continuando com nossa lista de efeitos de animação em jQuery, seguem abaixo mais 19 plugins que você pode baixar de graça e instalar rapidamente em seu site, adicionando funções e recursos extras ao mesmo, os quais certamente irão deixá-lo mais bonito e funcional.

Não se esqueça também de dar uma lida na primeira parte desta série:

18 efeitos de animação em Jquery

1) Adaptive Modal

Jquery - Adaptive Modal

Este plugin permite a criação de uma janela modal, a qual irá bloquear qualquer outro tipo de interação por parte do usuário com o restante do conteúdo.

Certamente você já deve ter visto algo do tipo, em caixas de diálogo com mensagens (e propagandas, também) ou até mesmo com campos para a inserção de dados de login.

2) Animated Arrow Navigations

Jquery - Animated Arrow Navigations

Setas animadas para uso em navegação. Simples assim, porém bastante úteis. Elas podem ser implementadas em algum slider que você porventura esteja utilizando em seu website, ou então podem ser adicionadas a alguma galeria de imagens.

Quatro estilos de animação muito bacanas estão disponíveis: “Slide out”, “Flip out”, “Double flip out” e “Both ways”.

3) Arrow Navigation Styles

Jquery - Arrow Navigation Styles

Mais setas animadas para navegação. Para utilização em diversos elementos: interface do usuário, navegação, sliders, galerias de imagem, etc.

Mais de 10 estilos estão disponíveis.

4) Covering

Jquery - Covering

Este plugin faz o que seu nome dá a entender: cobre algum elemento da página com outro, e exibe setas para que o visitante possa interagir, arrastando e revelando o segundo elemento progressivamente (imagens, por exemplo).

Pensando agora em formas de utilização para o “Covering”: imagine que você pode adicionar este plugin jQuery a uma galeria de imagens e criar comparações entre gráficos de versões de games para Xbox One, PlayStation 4 e PC. Ou entre versões standard e remasterizadas de determinado título, por exemplo.

5) Facebook Style Notification Popup

Jquery - Facebook Style Notification Popup

Popups com o mesmo estilo da UI do Facebook através de HTML, CSS e jQuery. Fácil implementação.

6) Flip-Quote

Jquery - Flip-Quote

O Flip-Quote permite a inserção de citações em qualquer artigo/texto. Estas quotes contam com um efeito de rotação que é acionado conforme o usuário rola a página.

Além disso, quando o visitante clica nas mesmas o texto relacionado é realçado.

7) floatlabels

Jquery - floatlabels

Adicione labels flutuantes a campos diversos. Assim que o visitante começa a interagir com os referidos campos, seu valor placeholder é exibido logo acima. O script pode inclusive ser customizado para se adequar às mais variadas necessidades.

8) Flowtype

Jquery - Flowtype

O Flowtype auxilia na tipografia, ajustando o tamanho da fonte com base na largura do elemento. Um slider, além disso, permite que o próprio visitante altere a largura, o que provoca a devida alteração na fonte.

Plugin bastante útil para permitir a adequação de textos a qualquer tamanho de tela.

9) inline help tips

Jquery - inline help tips

Adicione dicas a suas páginas e aplicativos web. O “inline help tips” permite a utilização tanto de HTML quanto de texto puro, além de dicas contendo imagens.

10) Inspiration for Custom Select Elements

Jquery - Inspiration for Custom Select Elements

Quem não precisa de inspiração? Pois bem, eis aqui uma “coleção com várias inspirações”. Várias opções de estilos customizados para campos de entrada em formulários web.

Diferentes estilos podem ser apresentados de acordo com as escolhas dos usuários, além disso.

11) jQuery Image Slideshow

Jquery - Image Slideshow

Eis aqui mais um slideshow (lembra do “Draggable Dual-View Slideshow” no artigo anterior desta série?).

O “jQuery Image Slideshow” é fácil de ser implementado. Além disso, o plugin é capaz de detectar todas as imagens na página que possuam um determinado atributo (data-slideshow).

Este plugin jQuery também suporta gestos do mouse para a navegação entre as imagens, vale lembrar.

12) Login Page with Shake Effect

Login Page with Shake Effect

Um formulário de login com um efeito de “sacudida”, ativado tão logo sejam inseridos usuários e/ou senhas incorretos.

13) Notification Styles Inspiration

Jquery - Notification Styles Inspiration

Várias ideias interessantes para notificações nada intrusivas. Estão disponíveis diversos estilos diferentes de animação, e você pode configurar também o local onde as notificações serão exibidas.

14) Page Preloading Effect

Jquery - Page Preloading Effect

Através de CSS Transforms, animações CSS e SVGs, crie preloaders para seus sites e páginas.

15) Panorama Viewer

Jquery - Panorama Viewer

Um plugin que permite a inserção de imagens panorâmicas em seu website. A navegação é realizada com o mouse.

16) Realistic Shadows

Jquery - Realistic Shadows

O “Realistic Shadows” permite a implementação de sombras. Sombras bonitas, quase foto realistas, que também reagem à interação do visitante.

O plugin utiliza a propriedade box-shadow do CSS3.

17) Remodal

Jquery - Remodal

Outra janela modal. O Remodal permite a criação de janelas modais bastante customizáveis.

18) Shuffle Images effect

Jquery - Shuffle Images effect

Este plugin embaralha e exibe diversas imagens tão logo o cursor do mouse seja posicionado sobre o elemento. Também estão disponíveis diversas animações diferentes, conforme o gatilho.

19) Timeline Design

Jquery - Timeline Design

Para a exibição de dados em formato de linha do tempo.

E não se esqueça de dar uma olhada no primeiro artigo da presente série:

18 efeitos de animação em Jquery

Lembrando também que agora temos um total de 37 efeitos de animação em jQuery, distribuídos ao longo destes dois artigos.

Até a próxima!

Você pode se interessar

Como colocar seu jogo no Steam
Dicas
3 visualizações
Dicas
3 visualizações

Como colocar seu jogo no Steam

Carlos L. A. da Silva - 24 de julho de 2019

Vender seu jogo de computador na maior loja virtual do mundo é mais fácil do que você imagina.

De volta aos anos 80!
Artigos
4 visualizações
Artigos
4 visualizações

De volta aos anos 80!

Carlos L. A. da Silva - 22 de julho de 2019

Stranger Things puxou a nostalgia e a Microsoft entrou na brincadeira. Mas como era a tecnologia da informação naquela época?

Promoções de Jogos do Final de Semana (19/07)
Notícias
23 visualizações
Notícias
23 visualizações

Promoções de Jogos do Final de Semana (19/07)

Carlos L. A. da Silva - 19 de julho de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mais publicações

Como ativar o DNS-over-HTTPS (DoH) no Firefox
Dicas
15 visualizações
15 visualizações

Como ativar o DNS-over-HTTPS (DoH) no Firefox

Carlos L. A. da Silva - 18 de julho de 2019
SEO // Dicionário do Programador
Vídeos
18 visualizações
18 visualizações

SEO // Dicionário do Programador

Thais Cardoso de Mello - 15 de julho de 2019
Promoções de Jogos do Final de Semana (12/07)
Notícias
19 visualizações
19 visualizações

Promoções de Jogos do Final de Semana (12/07)

Carlos L. A. da Silva - 12 de julho de 2019