Já há alguns artigos temos falado da importância de se apresentar elementos/efeitos diferentes e interessantes nos sites. Atualmente, com, literalmente, milhões de sites semelhantes, as diferenças e detalhes positivos fazem a diferença.
Gostaria de apresentar uma dessas “alternativas” para se fazer algo inovador nos sites, que é apresentar listas não ordenadas de forma completamente diferente do que você já viu usando o plugin para jQuery MobilyBlocks.
O MobilyBlocks permite apresentar listas não-ordenadas através de uma animação circular. Seu visitante pensará que vai encontrar mais do mesmo, mas vai se surpreender bastante ao se deparar com este efeito incrível!
Como usar o MobilyBlocks
A primeira coisa é fazer o download MobilyBlocks [4]. No arquivo compactado você encontrará algumas pastas com arquivos além dos estritamente necessários (pois vem junto um exemplo para demonstração e estudo). Na verdade, os arquivo essenciais para o funcionando do plugin são apenas 3, que devem ser inseridos nas páginas de seu site que conterão o efeito (obviamente respeito a estrutura de diretórios de seu próprio projeto):
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>
A estrutura para que o script funcione é tão-somente a estrutura simples e já tradicional de uma lista não ordenada. A dica principal é usar imagens como itens dessa lista para impactar ainda mais o visitante e tornar o efeito ainda mais bonito (também fica interessante já especificar uma imagem de background para o próprio elemento <ul>):
<div class="socials">
<ul class="reset">
<li><a href="#"><img src="img/socials/delicious.png" alt="" /></a></li>
<li><a href="#"><img src="img/socials/digg.png" alt="" /></a></li>
<li><a href="#"><img src="img/socials/google.png" alt="" /></a></li>
<li><a href="#"><img src="img/socials/stumbleupon.png" alt="" /></a></li>
<li><a href="#"><img src="img/socials/technorati.png" alt="" /></a></li>
<li><a href="#"><img src="img/socials/twitter.png" alt="" /></a></li>
</ul>
</div>
Depois disso, basta apontar para a lista que se deseja aplicar o efeito do MobilyBlocks, fazendo uma chamada simples à sua inicialização:
$('.socials').mobilyblocks();
E pronto, não é preciso mais nada! Agora você já pode conferir este incrível efeito de animação circular!
Opções do MobilyBlocks
O MobilyBlocks possui algumas opções simples:
- trigger (‘click’ ou ‘hover). Em qual evento o efeito acontecerá.
- direction (‘clockwise’ ou ‘counter’). Se a animação circular será no sentido horário ou anti-horário.
- duration. Duração da animação.
- zIndex. Valor z-index dos itens da lista.
- widthMultiplier. “Expansor” dos itens em relação à “base” (a melhor forma de entender é testar diversos valores).
Então, por exemplo, se quiséssemos aplicar um efeito de MobilyBlocks em uma lista de classe “special-list” com sentido anti-horário e duração de 450ms, teríamos o seguinte código:
$('.special-list').mobilyblocks({
direction: 'counter',
duration:450
});
Conclusão sobre o MobilyBlocks
Como você pode conferir na página de exemplo [5] oficial (e no arquivo compactado que você baixou), este é um efeito totalmente inovador, que não se encontra normalmente por aí.
Usá-lo certamente fará com que seu site tenha um diferencial importante em relação à concorrência e, por isso, o MobilyBlocks é altamente recomendado!
