0 Compartilhamentos 442 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!

Carregando...

Você pode se interessar

Microsoft está mapeando o planeta inteiro para simulador de voo
Artigos
8 visualizações
Artigos
8 visualizações

Microsoft está mapeando o planeta inteiro para simulador de voo

Carlos L. A. da Silva - 1 de julho de 2020

A franquia Flight Simulator está prestes a renascer com um nível de realismo jamais alcançado antes.

Promoções de Jogos do Final de Semana (26/06)
Notícias
13 visualizações
Notícias
13 visualizações

Promoções de Jogos do Final de Semana (26/06)

Carlos L. A. da Silva - 26 de junho de 2020

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

Os 10 melhores plugins de formulário para WordPress em 2020
Artigos
16 visualizações
Artigos
16 visualizações

Os 10 melhores plugins de formulário para WordPress em 2020

Carlos L. A. da Silva - 26 de junho de 2020

Selecionamos as melhores opções para você não ter dor de cabeça em 2020 criando formulários.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Você precisa conhecer Deno
Artigos
20 visualizações
20 visualizações

Você precisa conhecer Deno

Carlos L. A. da Silva - 20 de junho de 2020
Promoções de Jogos do Final de Semana (19/06)
Notícias
19 visualizações
19 visualizações

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

Carlos L. A. da Silva - 19 de junho de 2020
Como verificar a presença de malware no seu site
Dicas
22 visualizações
22 visualizações

Como verificar a presença de malware no seu site

Carlos L. A. da Silva - 18 de junho de 2020
O 5G NÃO ajudou no crescimento da pandemia do coronavírus
Artigos
23 visualizações
23 visualizações

O 5G NÃO ajudou no crescimento da pandemia do coronavírus

Carlos L. A. da Silva - 15 de junho de 2020