jun 21 2010

Usando easing para animações com jQuery

postado em artigos

Eu já havia mencionado o Easing em outro artigo, e me perguntaram estes dias como se usa o plugin para controlar melhor animações, então resolvi escrever um artigo rápidinho para esclarecer e mostrar o poder do easing.

Preparação

Se já não o tiver feito, vá para o site e baixe o plugin.  Vamos utilizar uma página bem simples em HTML:

<html>
<head>
<title></title>
<style type="text/css">
#target {
	background-color: red;
	width: 200px;
	height: 200px;
	position: relative;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
    // nosso código irá aqui
</script>
</head>
<body>

<div id="target"></div>

</body>
</html>

Até aqui sem novidades, agora vamos fazer uma animação simples:

jQuery(document).ready(function($){
    $('#target').click(function(){
        $(this).animate(
            { left : 100 },
            1000
        );
    });
});

Beleza, quando clicamos no div anima a sua propriedade left até 100 em um intervalo de 1000ms.

E agora, para dar uma variada, vamos usar um pouco de easing!

jQuery(document).ready(function($){
    $('#target').click(function(){
        $(this).animate(
            { left : 100 },
            1000,
            'easeInBounce' // adicionamos um efeito easing
        );
    });
});

Legalzinho né? Bom, é isso ae, não tem segredo! Para o easing por sí só não é tão útil assim, mas pode ser combinado com vários outros plugins por exemplo o Cycle para refinar o controle sobre as animações.

O site do plugin possui alguns exemplos mas é meio confuso, recomendo dar uma olhada aqui para ver exatamente o que faz cada efeito disponível no plugin.

Até mais!

[]s

Faça um commentário
jun 14 2010

jQuery Scratchie

postado em code

Litebox

EnglishPortuguês

jQuery Scratchie é um plugin completo para criar “raspadinhas”.

Defina uma imagem de fundo (o prêmio) e uma imagem ou cor para cobrir e clique ou arraste o mouse por cima para revelar a imagem debaixo!

Atualizado: 02/06/2010

Demo | Project @ GitHub | Download Link

Faça um commentário
dez 6 2009

jQuery Litebox

postado em code

Litebox

EnglishPortuguês

jQuery Litebox é uma implementação ultra-leve e sem firulas de “lightbox”. O plugin não precisa de nenhum CSS e requer configuração mínima para funcionar.

Após usar praticamente todos plugins de lightbox de jQuery por aí resolvi criar um que atendesse às minhas necessidades: que fosse leve, simples e que funcionasse sem dor de cabeça. Esta aí!

Atualizado: 07/12/2009

Demo | Project @ GitHub | Download Link

2 commentários
out 9 2009

10 Plugins Indispensáveis jQuery

postado em artigos

A biblioteca jQuery dispensa introduções e rapidamente tornou-se a biblioteca de javascript mais usada.  Apesar de ser poderosíssima por si só, é comum e prático usar plugins para estender o jQuery.  Ao longo dos quase 2 anos em que conheço o  jQuery usei inúmeros plugins, até criei alguns e hoje possuo um pequeno arsenal de plugins que acabo usando frequentemente.

Estes são 10 dos que mais uso e gosto, espero que seja útil!

Colorbox

Outro que dispensa introduções, o lightbox é prático, elegante e resolveu de uma vez por todas a questão de popups no javascript.  É aquela famosa técnica de escurecer toda a janela do navegador e dar destaque a uma foto ou outro conteúdo.

Quem meche com javascript há alguns anos com certeza já usou algumas das várias iterações tanto do lightbox original, escrito pelo Lokesh Dhakar, quanto dos inúmeros clones, entre os quais o Thickbox se destacou bastante.

O plugin que mais tenho usado ultimamente para estes fins é o Colorbox, porque ele é leve e simples, além de oferecer uma API bem compreensiva para ser estendido. Todas os prompts do jogo de memória que fiz foram usando o colorbox.

Link: Colorbox

Cycle

Simplesmente sensacional! Este plugin (também disponível tanto na versão lite, sem efeitos adicionais) permite criar slideshows usando vários efeitos diferentes para transições.  Ele possui várias opções e é muito customizável.  É muito fácil adicionar botões para controlar o slideshow ou miniaturas das fotos que ganham foco quando elas aparecem no slideshow.  É o plugin que usei na apresentação do meu portfólio.

Link: Cycle

Datepicker

Outro plugin das quais existem várias variações, foi originalmente criado por Marc Grabanski e, posteriormente, oficialmente anexado ao jQuery UI.  A versão standalone do plugin que não requer o jQuery UI é mantida por Keith Wood, um co-autor do plugin original.

É um pequeno calendário popup que facilita demais a escolha de datas no preenchimento de formulários.  Ele é fácil de customizar usando CSS e também de traduzir trocando as variáveis no código javascript.

Link: Datepicker

Easing

Um dos plugins mais subestimados na minha opinião, permite adicionar easing às animações do jQuery.  O que isto quer dizer?  Simplesmente, permite “ajudar” as animações customizadas, modificando-as de várias maneiras. O jeito mais fácil de entender realmente é olhando os exemplos.  O easing é tipicamente utilizado em conjunto com outros plugins.

Link: Easing

Easytip

Nada mais é do que um tooltip alternativo em vez daquele amarelo padrão da maioria dos navegadores.  Incialmente usa o atributo title do elemento é muito fácil de customizar.  Este plugin é do tipo “instalar e esquecer ” e é muito útil quando se quer esta funcionalidade mas não há tempo para desenvolver algo mais elaborado.

Link: Easytip

Hoverintent

Outro plugin na mesma categoria do Easing; é um que não faz uma diferença gritante imediata mas acrescenta aquela coisa sutil a mais que agrega bastante valor ao trabalho.  O que este plugin faz é tentar adivinhar o que o usuário pretende fazer com o mouse (no bom sentido).

Ele é derivado do método hover() do jQuery mas permite um grau bastante fino de customização.  Serve para suavizar eventos do tipo mouseOver e mouseOut ao calcular a velocidade do movimento do mouse para determinar se está apenas passando pelo elemento ou se de fato parou em cima.

Link: Hoverintent

jqwysiwyg

Este plugin com nome quase impronunciável é utilizado para criar caixas de texto editáveis com controles de edição.  Pense nele como um TinyMCE ou CK/FCKEditor lite. O plugin é leve e prático para quando se quer dar mais liberdade para o usuário editar um campo mas não precisa necessariamente de algo tão complexo quanto os dois editores mencionados.

Link: jqwysiwyg

LiveQuery

Sem dúvida o plugin mais revolucionário e útil que já encontrei!  Ele permite delegar eventos a elementos que ainda não existem no DOM.  Ou seja, é particularmente útil quando está lidando com elementos criados dinamicamente ou com elementos que são removidos e depois adicionados de volta à pagina. Você pode estar se perguntando qual a utilidade deste plugin já que a partir da versão 1.3 o jQuery introduziu o método live() que faz exatamente isto… Em primeiro lugar o método live foi baseado neste plugin!  E em seguindo lugar o live() permite apenas um subconjunto dos métodos do jQuery e também não permite delegar um callback que não seja um evento.

Complicou?  Fique tranquilo, é bem mais simples do que parece!  Só mantenha em mente quando lidando com elementos dinâmicos que se o live() não funcionar como esperando, o LiveQuery pode ser a solução!  Usei este plugin bastante nos jogos de memória e campo minado que fiz.

Link: LiveQuery

prettyPhoto

O que!  Mais um clone de lightbox??  Pois é!  A razão pela qual uso tanto este quanto o Colorbox e o motivo de incluir ambos nesta lista é simples: cada um se adequa melhor a uma tarefa específica.  O Colorbox é melhor para diálogos modais e pode ser estendido facilmente, já o prettyPhoto, como indica o nome, é ideal para mostrar fotos (e vídeos, flash, etc).

O prettyPhoto é um plugin mais bonito e possui efeitos legais que agregam valor neste contexto.

Link: prettyPhoto

Superfish

De longe o melhor plugin para criar menus que já usei.  Ele facilita demais a criação de menus drop-down que funcionam em qualquer navegador.  O plugin é muito flexível e pode ser usado em conjunto com o HoverIntent (descrito acima), SuperSubs (para submenus de larguras variáveis) e também o bgiframe para evitar problemas de z-index no Internet Explorer 6.

Porém, o plugin não faz mágicas e é necessário criar o HTML e CSS direito para que funcione perfeitamente, mas como há vários exemplos no site do plugin, fica fácil!

Link: Superfish

É isso!

Estes são alguns dos plugins que eu mais uso, e você, quais plugins considera indispensáveis?

3 commentários
set 6 2009

jQuery SHA256

postado em code

SHA256

EnglishPortuguês
jQuery SHA256 é um plugin baseado na implementação em Javascript do algoritmo SHA256 feita por Angel Marin e Paul Johnston. Permite obter o SHA256 de qualquer valor e tabém gerar um keyed-Hash Message Authentication Code (HMAC) usando uma chave (key) e o valor.

O plugin é leve e funcional.

Atualizado: 06/09/2009

Demo | Project @ GitHub | Download Link

Faça um commentário
set 5 2009

Nova versão do plugin jQuery CoolInput

postado em artigos

Finalizei hoje a provável versão final do plugin de jQuery CoolInput!

Para quem ainda não conhece, veja a página do projeto.

A nova versão traz a possibilidade de especificar a dica (ou ‘hint’) manualmente sem ter que usar algum atributo e também permite que esta mesma configuração seja feita de uma maneira mais prática.

Como sempre, estou aberto a críticas e sugestões!

Faça um commentário
ago 28 2009

jQuery CoolInput

postado em code

CoolInput

EnglishPortuguês

CoolInput é um plugin extremamente simples inspirado no tutorial do Remy Sharp sobre criar um text-hint plugin. Após ler o seu artigo percebi que gostaria de adicionar algumas opções adicionais e também queria criar o meu primeiro plugin, então aqui está o CoolInput!

CoolInput é usado para criar dicas (hints) para campos de texto. O plugin é altamente customizável se necessário mas pode ser usado sem nenhuma configuração. Simplesmente funciona.

O plugin é absuradamente simples e leve!

Atualizado: 05/09/2009

Demo | Project @ GitHub | Download Link

Faça um commentário
ago 21 2009

10 dicas para programar melhor com jQuery

postado em artigos

Excelente post com boas dicas de como programar melhor usando a biblioteca de Javascript jQuery.

Gostei especialmente da dica de evitar o body onload e usar $(window).load() como alternativa mais elegante e flexível.

Vale a pena conferir!

Link: 10 Tips for Writing Better jQuery Code

Faça um commentário
ago 20 2009

Minesweeper… versão jQuery!

postado em code

Projeto Pessoal

Data: Agosto 2009

Descrição:

Esta é mais um lançamento do meu projeto de usar Javascript como alternativa para o Flash na criação de jogos online.

Escolhi o Minesweeper pelo fato de ser um jogo aparentemente simples e que pudesse ser fielmente recriado usando Javascript.

Quem sabe eu escreva um artigo descrevendo a criação do jogo em breve…

Confira o resultado final:

Minesweeper

Características:

  • Jogo feito com back-end PHP e front-end em Javascript usando jQuery
  • Uso extensivo de Ajax
  • Armazenamento de estatísticas e recordes

Link: Minesweeper

Faça um commentário
ago 14 2009

Jogo de Memória em Javascript

postado em code

Projeto Pessoal

Data: Agosto 2009

Descrição:

Surgiu como um desafio pessoal de criar um mini-game online divertido e fácil de jogar, mas sem usar Flash.

Com o surgimento há alguns anos de inúmeras bibliotecas de Javascript tais como o prototype, scriptaculous e jQuery, entre outras, criar jogos rápidos e cross-browser usando Javascript deixou de ser algo experimental e passou a ser uma realidade.  Porém, o Flash continua líder absoluto no segmento de mini-games online.

Este é meu primeiro mini-game em javascript e fiquei muito satisfeito com o resultado, confiram!

Jogo de Memória

Características:

  • Jogo feito com back-end PHP e front-end em Javascript usando jQuery
  • Uso extensivo de Ajax
  • Armazenamento de estatísticas e recordes

Link: Jogo de Memória

1 commentário