Mais 19 efeitos de animação em Jquery

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!

Sobre Marcos A.T. Silva

Marcos A.T. Silva é empresário na área de TI. É apaixonado por games desde que ganhou seu primeiro Atari 2600. Outras de suas paixões são a leitura e a música. Toca piano desde cedo e também gosta do bom e velho rock ‘n roll. Pode ser encontrado também no XboxPlus.

Queremos saber sua opinião