0 Compartilhamentos 449 Views 1 Comments

18 efeitos de animação em Jquery

21 de setembro de 2015

Utilizando a biblioteca Jquery, você pode implementar inúmeros recursos bacanas em seu site. Plugins e scripts já prontos podem ser baixados gratuitamente, e sua implementação quase sempre é bem simples, o que resulta em grande economia de tempo para os webmasters.

Pense em “pacotes prontos” com recursos, melhorias e novas funcionalidades, os quais podem ser baixados e instalados rapidamente, estendendo as funcionalidades do site com um detalhe muito bacana: praticamente não existem limites para o que pode ser feito.

Atualização – 24/09/2015: publicada a segunda parte da série:

Sliders, galerias de imagem, chats, players os mais diversos, animações, formulários, plugins que facilitam a adaptação e/ou a criação de sites responsivos: a lista é enorme, e certamente haverá sempre muitos que você desejará ou poderá utilizar.

É até mesmo difícil escolher, dado o grande número de opções disponíveis. Justamente pensando nisso, resolvemos preparar mais uma lista para você.

Uma lista com mais de 30 efeitos de animação em Jquery, a qual será dividida em 2 partes/artigos.

Confira abaixo a primeira parte, com 18 efeitos/plugins, e aguarde pela segunda parte no decorrer dos próximos dias:

1) Ajax Upload and Resize an Image

Jquery - Ajax Upload and Resize an Image

A ideia aqui é criar uma página para upload e redimensionamento de imagens sem a necessidade de refresh.

Após o upload, o “Ajax Upload and Resize an Image” apresenta ao usuário uma lista com várias versões redimensionadas da imagem. O redimensionamento toma como base a largura das imagens, e 3 opções estão disponíveis: 50px, 100px e 200px.

2) Attractive Animated Hover Effects

Jquery - Attractive Animated Hover Effects

Este plugin cria belos e interessantes efeitos hover em thumbnails. 7 variações diferentes estão disponíveis.

3) Awesome slide hover animation

Jquery - Awesome slide hover animation

Outro efeito hover para imagens simples e bacana. O “Awesome slide hover animation”, além disso, exibe o caption das imagens assim que o cursor do mouse é posicionado sobre as mesmas.

4) Buttons With Built-in Progress

Jquery - Buttons With Built-in Progress

Botões com indicadores de progresso embutidos. Barras de progresso. Trata-se de algo simples, funcional e bonito.

Este plugin permite que você exiba o progresso do envio de um formulário, por exemplo, inclusive com a devida mensagem indicadora (loading, carregando, etc).

5) ContentShare

Jquery - ContentShare

Que tal incluir um recurso para compartilhamento em suas páginas? Um recurso que permita a seleção de trechos individuais de texto?

O ContentShare é o plugin que você precisa. Quando implementado, tudo o que o visitante precisa fazer é selecionar algum trecho da página (arrastando e soltando com o mouse) para que as opções de compartilhamento em redes sociais sejam exibidas.

Por padrão, o plugin suporta o Facebook e o Twitter, mas os desenvolvedores afirmam que redes extras podem ser adicionadas.

6) Cool Social Buttons

Jquery - Cool Social Buttons

Ainda falando a respeito de redes sociais, vamos agora apresentar a você um plugin Jquery que oferece recursos de compartilhamento mais tradicionais.

O “Cool Social Buttons” usa funcionalidades do CSS3 para exibir botões de compartilhamento em redes sociais que não tornam o carregamento das páginas lento.

7) Draggable Dual-View Slideshow

Jquery - Draggable Dual-View Slideshow

Um prático slideshow “arrastável” (draggable). O visitante pode navegar pelas imagens com o próprio mouse ou então utilizar as setas do teclado. Também é possível alternar facilmente entre os modos carrossel e tela cheia, através de um botão dedicado.

Vale lembrar que os desenvolvedores deixam bem claro o caráter experimental do slideshow, portanto, tenha cuidado.

8) EasyZoom

Jquery - EasyZoom

Um plugin para zoom e movimentação da câmera em imagens, tanto através do mouse quanto através dos dedos (em dispositivos móveis).

9) ElastiStack

Jquery - ElastiStack

O ElastiStack permite que o usuário/visitante navegue através de uma série de itens (como imagens, por exemplo) de forma bastante simples e intuitiva, simplesmente arrastando-os com o mouse.

Após arrastar o primeiro da lista, o próximo é automaticamente carregado e posicionado, já podendo ser arrastado. E assim por diante.

Trata-se de uma excelente maneira de implementar uma galeria de imagens, também.

10) HexaFlip

Jquery - HexaFlip

O HexaFlip permite que você utilize cubos 3D como parte de sua interface do usuário (UI). Como botões, por exemplo.

Ele utiliza uma combinação de CSS e JavaScript, e o resultado é muito bonito e elegante.

11) Ideas for Subtle Hover Effect

Jquery - Ideas for Subtle Hover Effect

Mais efeitos hover em imagens. Dezenas deles. Dois conjuntos estão disponíveis.

12) Owl Carousel Slider

Jquery - Owl Carousel Slider

Um slider muito bonito e clean, que também pode ser facilmente implementado. O “Owl Carousel Slider”, aliás, é totalmente responsivo.

13) Progression

Jquery - Progression

Eis aqui um plugin Jquery que fornece aos usuários/visitantes dicas e informações a respeito do progresso durante o preenchimento de formulários.

As informações são atualizadas e exibidas tão logo o usuário mude de campo, sendo que o progresso pode ser visualizado tanto através de uma barra de progresso quanto através de percentual.

14) Shutter Effect Portfolio with jQuery and Canvas

Este plugin, que também pode ser incorporado facilmente a qualquer website, permite a criação de uma galeria de imagens onde a transição se dá através de um efeito shutter. É muito bacana.

15) Squeezebox Portfolio Template

Jquery - Squeezebox Portfolio Template

Temos aqui um plugin que permite a criação de portfólios online. O Squeezebox exibe uma pequena introdução (um botão), e em seguida uma lista com imagens/itens que podem então serem acessados livremente, em qualquer ordem.

Retornar para itens anteriores ou para o início do portfólio é bem simples, e a navegação também pode ser realizada através das setas do teclado.

16) Strength

Jquery - Strength

Um plugin para campos de input de senha com indicação do nível de segurança (desde “very weak” = “muito fraca” até “strong” = “forte”).

O “Strength” também permite que o usuário alterne entre a visualização da senha ou de asteriscos.

17) Subscribe Better

Jquery - Subscribe Better

Este plugin possibilita a inserção de um formulário de assinatura (de uma newsletter, por exemplo) que é carregado após determinadas ações por parte do usuário (após rolar a tela para baixo – final da página – por exemplo).

18) Tab Styles Inspiration

Jquery - Tab Styles Inspiration

Alguns estilos modernos e elegantes para abas, incluindo várias transições em CSS.

A coleção também utiliza belos ícones desenvolvidos pelo pessoal do Elegant Themes. Ícones que, aliás, estão disponíveis para download gratuito.

E é isso. Aguarde pela segunda parte de nossa lista de efeitos de animação em Jquery.

Atualização – 24/09/2015: confira a segunda parte da série:

Você pode se interessar

Paypal faz aporte de USD 750 milhões no Mercado Livre
Notícias
8 visualizações
Notícias
8 visualizações

Paypal faz aporte de USD 750 milhões no Mercado Livre

Redação - 25 de março de 2019

Com a clara intenção de consolidar sua operação na América Latina, em especial no Brasil, Paypal mira em público desbancarizado.

Programação Funcional // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,806 visualizações
Vídeos
1,655 compartilhamentos6,806 visualizações

Programação Funcional // Dicionário do Programador

Thais Cardoso de Mello - 25 de março de 2019

Programação Funcional é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

World Backup Day está chegando e você vai poder fazer seu backup de graça
Notícias
9 visualizações
Notícias
9 visualizações

World Backup Day está chegando e você vai poder fazer seu backup de graça

Carlos L. A. da Silva - 25 de março de 2019

31 de março está aí: você está com seus backups em dia? Nós vamos te ajudar a fazer isso com o EaseUS Todo Backup na faixa!

One Response

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (22/03)
Notícias
7 visualizações
7 visualizações

Promoções de Jogos do Final de Semana (22/03)

Carlos L. A. da Silva - 22 de março de 2019
Como substituir os produtos da Adobe pagando nada ou muito pouco
Dicas
9 visualizações
9 visualizações

Como substituir os produtos da Adobe pagando nada ou muito pouco

Carlos L. A. da Silva - 22 de março de 2019
Reagindo a Vagas de Estágio // Vlog React #91
Vídeos
1,655 compartilhamentos6,809 visualizações
1,655 compartilhamentos6,809 visualizações

Reagindo a Vagas de Estágio // Vlog React #91

Thais Cardoso de Mello - 21 de março de 2019
A Inteligência Artificial que era perigosa demais
Artigos
4 visualizações
4 visualizações

A Inteligência Artificial que era perigosa demais

Carlos L. A. da Silva - 21 de março de 2019