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

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

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!