0 Compartilhamentos 37 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

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1
Vídeos
14 visualizações
Vídeos
14 visualizações

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1

Gabriel Fróes - 9 de outubro de 2017

No último vídeo do canal demos algumas dicas sobre como preparar seu currículo para uma vaga de programador mas esquecemos de uma dica super importante que falaremos nesse vídeo.

Confira os principais trailers da New York Comic Con 2017
Notícias
22 visualizações
Notícias
22 visualizações

Confira os principais trailers da New York Comic Con 2017

Carlos L. A. da Silva - 9 de outubro de 2017

Festa dos quadrinhos foi palco de trailers de mega-produções do cinema e séries de TV: Liga da Justiça, The Walking Dead e novo Círculo de Fogo. Confira!

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma
Notícias
9 visualizações
Notícias
9 visualizações

Google teria encontrado indícios de anúncios patrocinados pelo governo russo em sua plataforma

Carlos L. A. da Silva - 9 de outubro de 2017

Segundo o jornal The Washington Post, empresa teria começado sua investigação depois de casos similares no Twitter e no Facebook.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Executivo da Microsoft confirma desinteresse no Windows Phone
Notícias
27 visualizações
27 visualizações

Executivo da Microsoft confirma desinteresse no Windows Phone

Carlos L. A. da Silva - 9 de outubro de 2017
Elon Musk critica Google Clips
Notícias
25 visualizações
25 visualizações

Elon Musk critica Google Clips

Carlos L. A. da Silva - 9 de outubro de 2017
Michel Temer vetou emenda que poderia censurar a internet
Notícias
24 visualizações
24 visualizações

Michel Temer vetou emenda que poderia censurar a internet

Carlos L. A. da Silva - 9 de outubro de 2017