Os desenvolvedores, como prestadores de serviço que normalmente são, devem conquistar seus clientes. Nada melhor para conquistar um cliente do que superar suas expectativas. Mas as vezes a criatividade está fraca e superar as expectativas pode se tornar uma tarefa árdua.

Vou mostrar uma forma muito interessante de conquistar o seu cliente e deixar não só ele, mas também os usuários, muito satisfeitos com esse efeito.

O suspense já foi feito. Agora vamos aos trabalhos!

Depois do Suspense

Depois de todo esse suspense, apresento-lhe o menu com efeito olho de peixe, ou fisheye.

Você foi surpreendido positivamente? Gostou do efeito? Então seu cliente também vai gostar!

O efeito de olho de peixe é obtido através do Plugin Interface, do framework jQuery. Este plugin tem vários “sub-plugins”. Um destes “sub-plugins” é o Fisheye.

Mais informações:

Framework jQuery

Plugin Interface

O grande lance deste script que estou apresentando e que o diferencia do exemplo de demonstração do Plugin é que este é Javascript Não-Obstrutivo.

Os códigos

HTML

O código HTML do menu é um código normal, que respeita as normas Webstandards. Você pode ver o código do arquivo HTML aqui.

CSS

O código completo pode ser visto aqui: Código CSS.

O código CSS, assim como o HTML, está dentro dos padrões, mas tem uma nuance que é necessária para o perfeito funcionamento do menu.

O “problema” é que essa nunce torna o nosso menu inútil, quando o Javascript está desabilitado.

Eis:

a.fisheyeItem
{
    position: absolute;
    top: 0;
}

Necessariamente, o link do menu deve ter a característica acima. Mas se essas características fossem colocadas diretamente no seletor do link (.fisheyeContainter a), todos os links ficariam uns por cima dos outros.

Para resolver esse problema, eu criei uma classe fisheyeItem e a coloco nos links dinamicamente através do próprio Javascript. Em outras palavras, se o Javascript estiver desabilitado, os links não terão essas características.

Eu sempre uso este artifício para fazer os meus scripts não-obstrutivos!

Javascript

Como sempre, o código Javascript é a prioridade dos artigos sobre jQuery. Veja o código clicando aqui.

Este script prova que tamanho não é documento.

Código Javascript – Fisheye

• Linha 1: Atribui o código da linha 2 a 11 ao evento onload do nosso documento. No jQuery, o onload é sinônimo de ready.
• Linha 2: Atribui a classe CSS fisheyeItem aos links. A atribuição dessa classe se deve ao explicado na seção anterior (Código CSS).
• Linha 3: Atribui a função Fisheye à DIV fisheye, que contém o menu. A seguir estão os atributos que darão vida ao menu.
• Linha 4: Quantidade de zoom da lente de aumento. O valor 20 do exemplo, indica que a imagem deve aumentar em 20% do seu tamanho original.
• Linha 5: Elemento que irá ganhar o zoom. Nesse caso, nossos links. Sugiro não mexer.
• Linha 6: Elemento que contém o texto explicativo das figuras. Esse texto, que é mostrado quando o Javascript está desabilitado, só é mostrado quando o mouse esté sobre a imagem, quando o Javascript está habilitado. No nosso caso foi o elemento SPAN.
• Linha 7: Classe do elemento que contém o menu. No nosso caso, a classe foi atribuída ao elemento UL, mas pode ser atribuída a outro elemento, como DIV, desde que seja alterada o restante do HTML e CSS. Sugiro que não seja mudado o elemento.
• Linha 8: Tamanho, em pixels, das imagens em seu estado normal.
• Linha 9: Distância, em pixels, em que o mouse será considerado sobre (over) a imagem.
• Linha 10: Alinhamento horizontal do menu em relacão ao elemento que o contém.

Concluindo…

O framework jQuery é muito, muito rico. Não há limites para o jQuery e seus Plugins!

Sugiro que passem a utilizá-lo e desfrutem de suas facilidades.

O próximo artigo será tão impactante quanto esse, acreditem!

See you!