---
title: Novos plugins jQuery e bibliotecas JavaScript
authors: Davi Ferreira
type: post
date: 2012-06-12
excerpt: Animações, slides, fotos, templates e compartilhamento estão nessa lista de plugins jQuery e bibliotecas JavaScript que foram destaque nesta primeira metade de 2012.
url: /novos-plugins-jquery-e-bibliotecas-javascript/
tweetbackscheck:
  - 1356404139
shorturls:
  - 'a:3:{s:9:"permalink";s:31:"https://tableless.com.br/?p=6246";s:7:"tinyurl";s:26:"https://tinyurl.com/cjwa7vv";s:4:"isgd";s:19:"https://is.gd/mB09rM";}'
twittercomments:
  - 'a:0:{}'
dsq_thread_id: 722672771
categories:
  - Javascript
  - JQuery
tags:
  - Javascript
  - JQuery
  - plugins

---
Confira uma lista de plugins e bibliotecas JavaScript que foram destaque nesta primeira metade do ano.

## jQuery Transit

<a href="https://ricostacruz.com/jquery.transit" title="jQuery Transit" target="_blank">https://ricostacruz.com/jquery.transit</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/jquery-transit.jpg" alt="" width="676" height="133" class="alignnone size-full wp-image-6261" srcset="uploads/2012/06/jquery-transit.jpg 676w, uploads/2012/06/jquery-transit-300x59.jpg 300w" sizes="(max-width: 676px) 100vw, 676px" />

Este plugin jQuery é uma espécie de wrapper para animações e transições CSS3. Possui a mesma sintaxe do método animate e permite transformar diferentes propriedades de um elemento: eixos X e Y, perspectiva, girar simulando 3D etc.

## Curtain.js

<a href="https://curtain.victorcoulon.fr" title="Curtain.js" target="_blank">https://curtain.victorcoulon.fr</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/Curtain.js.jpg" alt="" width="677" height="119" class="alignnone size-full wp-image-6258" srcset="uploads/2012/06/Curtain.js.jpg 677w, uploads/2012/06/Curtain.js-300x52.jpg 300w" sizes="(max-width: 677px) 100vw, 677px" />

O plugin Curtain.js permite a criação de sites e aplicativos com múltiplas camadas. O efeito de transição simula uma cortina (daí o nome!). Possui opções que permitem personalizar a velocidade e o tipo da animação e habilitar a navegação via teclado.

## Balloons.IO

<a href="https://gravityonmars.github.com/Balloons.IO" title="Balloons.IO" target="_blank">https://gravityonmars.github.com/Balloons.IO</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/Balloons.IO_.jpg" alt="" width="678" height="254" class="alignnone size-full wp-image-6256" srcset="uploads/2012/06/Balloons.IO_.jpg 678w, uploads/2012/06/Balloons.IO_-300x112.jpg 300w" sizes="(max-width: 678px) 100vw, 678px" />

E que tal um chat desenvolvido em node.JS e Redis? O aplicativo Ballons.IO ataca tanto de servidor como de cliente. A autenticação dos usuários é feita através do Twitter, já a instalação, por se tratar também de um servidor, requer um conhecimento um pouco mais avançado.

## Mailcheck

<a href="https://github.com/Kicksend/mailcheck" title="Mailcheck" target="_blank">https://github.com/Kicksend/mailcheck</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/mailcheck.jpg" alt="" width="447" height="108" class="alignnone size-full wp-image-6263" srcset="uploads/2012/06/mailcheck.jpg 447w, uploads/2012/06/mailcheck-300x72.jpg 300w" sizes="(max-width: 447px) 100vw, 447px" />

Segundo o pessoal da Kicksend, o plugin Mailcheck reduziu em 50% a taxa de retorno de inscrições na sua mailing list. O que ele faz é sugerir domínios corretos quando o usuário digita um domínio inválido. Por exemplo, digitando &#8220;hotnail&#8221; o plugin automaticamente sugere a correção para &#8220;hotmail&#8221;.

## TimelineJS

<a href="https://timeline.verite.co" title="TimelineJS" target="_blank">https://timeline.verite.co</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/timelinejs.jpg" alt="" width="676" height="153" class="alignnone size-full wp-image-6267" srcset="uploads/2012/06/timelinejs.jpg 676w, uploads/2012/06/timelinejs-300x67.jpg 300w" sizes="(max-width: 676px) 100vw, 676px" />

Depois da implementação do Facebook, o conceito de linha do tempo virou uma nova tendência. Essa biblioteca JavaScript permite a fácil criação de uma timeline que consome diretamente de um documento publicado no Google Docs ou de uma objeto JSON. Também disponível como plugin para WordPress.

## buildr

<a href="https://mlanza.github.com/buildr" title="buildr" target="_blank">https://mlanza.github.com/buildr</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/buildr.jpg" alt="" width="502" height="360" class="alignnone size-full wp-image-6257" srcset="uploads/2012/06/buildr.jpg 502w, uploads/2012/06/buildr-300x215.jpg 300w" sizes="(max-width: 502px) 100vw, 502px" />

O plugin buildr é voltado para aqueles que preferem código a templates na hora de retornar HTML. O que ele faz é transformar tags HTML em métodos que retornam um objeto jQuery com a tag especificada.

## turn.js

<a href="https://www.turnjs.com" title="turn.js" target="_blank">https://www.turnjs.com</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/turnjs.jpg" alt="" width="677" height="312" class="alignnone size-full wp-image-6268" srcset="uploads/2012/06/turnjs.jpg 677w, uploads/2012/06/turnjs-300x138.jpg 300w" sizes="(max-width: 677px) 100vw, 677px" />

Muitos devem conhecer aquele efeito de revista desenvolvido em flash. O turn.js é um plugin que possibilita o mesmo efeito utilizando jQuery e permite a criação de revistas e livros online.

## Sequence

<a href="https://www.sequencejs.com" title="Sequence" target="_blank">https://www.sequencejs.com</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/sequence.jpg" alt="" width="676" height="261" class="alignnone size-full wp-image-6265" srcset="uploads/2012/06/sequence.jpg 676w, uploads/2012/06/sequence-300x115.jpg 300w" sizes="(max-width: 676px) 100vw, 676px" />

O diferencial do Sequence em relação a outros sliders é o fato deste plugin não forçar nenhum tema, ou seja, seu nível de personalização é muito alto e bastante flexível. Além disso, o Sequence já vem com suporte nativo a dispositivos de toque e layouts responsive.

## gmaps.js

<a href="https://hpneo.github.com/gmaps" title="gmaps.js" target="_blank">https://hpneo.github.com/gmaps</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/gmaps.js.jpg" alt="" width="678" height="226" class="alignnone size-full wp-image-6260" srcset="uploads/2012/06/gmaps.js.jpg 678w, uploads/2012/06/gmaps.js-300x100.jpg 300w" sizes="(max-width: 678px) 100vw, 678px" />

O gmaps.js é um plugin jQuery para interagir com a interface do Google Maps de forma mais simples. Possui todos os recursos da API do serviço aliados à simplicidade do jQuery. Inclui ainda suporte a _Geolocation_.

## Glisse.js

<a href="https://glisse.victorcoulon.fr" title="Glisse.js" target="_blank">https://glisse.victorcoulon.fr</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/glisse.jpg" alt="" width="656" height="233" class="alignnone size-full wp-image-6259" srcset="uploads/2012/06/glisse.jpg 656w, uploads/2012/06/glisse-300x106.jpg 300w" sizes="(max-width: 656px) 100vw, 656px" />

Glisse é (mais) um plugin jQuery para visualização de fotos. Ele utiliza recursos avançados de CSS3, incluindo _keyframes_. Possui suporte a layouts responsive, navegação no teclado e visualização em _full screen_. 

## jurlp

<a href="https://github.com/tombonner/jurlp" title="jurlp" target="_blank">https://github.com/tombonner/jurlp</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/jurlp.jpg" alt="" width="292" height="197" class="alignnone size-full wp-image-6262" />

Jurlp, ou jQuery URL Parser, é um plugin para extrair informações, filtrar e manipular URLs. É ideal para obter dados de atributos _href_ e _src_. Permite também a criação de links automáticos a partir de URLs encontradas no texto.

## jQuery Scroll Path

<a href="https://joelb.me/scrollpath" title="jQuery Scroll Path" target="_blank">https://joelb.me/scrollpath</a>

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/scrollpath.jpg" alt="" width="678" height="381" class="alignnone size-full wp-image-6264" srcset="uploads/2012/06/scrollpath.jpg 678w, uploads/2012/06/scrollpath-300x168.jpg 300w" sizes="(max-width: 678px) 100vw, 678px" />

O plugin Scroll Path possibilita a criação de caminhos personalizados para o scroll da sua página/aplicação utilizando o elemento canvas. Vem acompanhado de uma scrollbar customizada.

## Socialite.js

[https://www.socialitejs.com][1]

<img src="https://raw.githubusercontent.com/diegoeis/tableless-static-images/master/2012/06/Socialite.js.jpg" alt="" width="395" height="105" class="alignnone size-full wp-image-6266" srcset="uploads/2012/06/Socialite.js.jpg 395w, uploads/2012/06/Socialite.js-300x79.jpg 300w" sizes="(max-width: 395px) 100vw, 395px" />

Para finalizar, uma biblioteca JavaScript para implementar diversos botões de compartilhamento social. O destaque fica para as diferentes possibilidades de carregamento melhorando assim a performance do seu site.

 [1]: https://www.socialitejs.com "Socialite.js"