Menu Espetacular Com Plugin jQuery MobilyBlocks

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. 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:

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 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!

Be Sociable, Share!

•