0 Compartilhamentos 57 Views

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

DICA EXTRA: Prepare seu Currículo de Programador // Vlog #53.1
Vídeos
9 visualizações
Vídeos
9 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
20 visualizações
Notícias
20 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
7 visualizações
Notícias
7 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
23 visualizações
23 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
19 visualizações
19 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
22 visualizações
22 visualizações

Michel Temer vetou emenda que poderia censurar a internet

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