[Resolvido] Efeito Transição menu com Imagens

fernandotholl · Fevereiro 28, 2012

Bom dia a todos!

Primeiramente coloquei esse post na área de WebStandarts, porém fugiu um pouco do foco e veio para JavaScript/jQuery, meu problema é o seguinte:

Preciso criar um menu igual aquele do MAC OS, aqui vai um exemplo feito em jQuery: www.wizzud.com/jqDock/

Até ai tudo bem, eu encontrei dezenas de plugins prontos como este, porém 90% deles são feitos apenas com âncoras, e eu utilizo uma lista não ordenada, que "semântimante" é o mais correto, e não quero desfazer isso.

Meu Código HTML

<ul id="menu-footer">              
               <li>
                   <div class="ft-img-acesso"><a href="index.html" title="Página Inicial"><img src="icons/48/home.png" alt="Página Inicial" /></a></div>
                   <div class="ft-titulo-acesso"><a href="index.html" title="Página Inicial">Página Inicial</a></div>                            
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Consulta"><img src="icons/48/consulta.png" alt="Consulta" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Consulta</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Configurações"><img src="icons/48/configs.png" alt="Configurações" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Configurações</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Contatos"><img src="icons/48/contacts.png" alt="Contatos" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Contatos</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Ajuda (Help Desk)"><img src="icons/48/help-desk.png" alt="Ajuda (Help Desk)" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Ajuda</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Arquivos"><img src="icons/48/folder.png" alt="Arquivos" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Arquivos</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Busca Geral"><img src="icons/48/busca-geral.png" alt="Busca Geral" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Busca Geral</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Mensagens"><img src="icons/48/mensagens.png" alt="Mensagens" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Mensagens</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Fórum"><img src="icons/48/forum.png" alt="Fórum" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Fórum</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Notícias"><img src="icons/48/news.png" alt="Notícias" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Notícias</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Multimídia"><img src="icons/48/multimidia.png" alt="Multimídia" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Multimídia</a></div>
               </li>
               <li>
                   <div class="ft-img-acesso"><a href="interna.html" title="Eventos"><img src="icons/48/events.png" alt="Eventos" /></a></div>
                   <div class="ft-titulo-acesso"><a href="interna.html" title="Página Inicial">Eventos</a></div>
               </li>
           </ul>

Os outros 10% não se encaixaram com o meu Layout, pois usam propriedades que desconfigurão tudo.

Olhem meu Menu como é:

Se alguém conseguir uma forma simples de implementar, utilizando um Plugin quem sabe, poxa seria ótimo, caso contrário terei que avaliar outra solução.

hufersil · Fevereiro 28, 2012

Bom, fiz um exemplo bem simples, usando jQuery.

<html>
<head>
	<title>Teste dock</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){
			var radius = 100;
			var maxZoom = 2.5;
			var minZoom = 1;
			$(document.body).mousemove(function(e){
				$('.dock img').each(function(){
					var img = $(this), nw, nh, z, pct, off, dist;

					img.width('').height('');
					nw = img.width() * minZoom;
					nh = img.height() * minZoom;
					img.width( nw ).height( nh );

					off = img.offset();
					dist = Math.sqrt(Math.pow(e.pageX - (off.left + img.width()/2), 2) + Math.pow(e.pageY - (off.top + img.height()/2), 2));

					if(dist < radius){
						pct = 1 - (dist/radius);
						z = 1 + ((maxZoom-1) * pct);
						nw = img.width() * z;
						nh = img.height() * z;
						img.width( nw ).height( nh );
					}
				});
			});
		});
	</script>

	<style type="text/css">
	.dock {
		display: block;
		position: absolute;
		text-align: center;
		padding: 0px;
		margin: 0px;
		bottom: 0px;
		width: 98%;
	}
	.dock li {
		list-style: none;
		display: inline;
		margin-right: 10px;
	}
	</style>

</head>

<body>

	<ul class="dock">
		<li><a href="#"><img class="teste" src="http://www.iconfinder.com/ajax/download/png/?id=17814&s=48" /></a></li>
		<li><a href="#"><img src="http://www.iconfinder.com/ajax/download/png/?id=8843&s=48" /></a></li>
		<li><a href="#"><img src="http://www.iconfinder.com/ajax/download/png/?id=10598&s=48" /></a></li>
		<li><a href="#"><img src="http://www.iconfinder.com/ajax/download/png/?id=65677&s=48" /></a></li>
		<li><a href="#"><img src="http://www.iconfinder.com/ajax/download/png/?id=64327&s=32" /></a></li>
	</ul>

</body>

</html>

@braços e fique com Deus!

fernandotholl · Fevereiro 28, 2012

Meu caro @hufersil, muito obrigado pela ajuda, perfeito, era realmente isso que eu precisava, funcionou corretamente com o meu layout. Porém tenho duas considereções a lhe fazer:

1 - Visando entender e não só copiar o seu código, gostaria de lhe perguntar o que essas duas linhas realmente fazem:

off = img.offset();
dist = Math.sqrt(Math.pow(e.pageX - (off.left + img.width()/2), 2) + Math.pow(e.pageY - (off.top + img.height()/2), 2));

Pois do código foi a única parte que não entendi o funcionamento.

2 - Veja na imagem abaixo, o menu funciona corretamente, porém a imagem aumenta para baixo, e não para cima como no exemplo que você me passou e que funciona corretamente. Vale ressaltar que seu exemplo trabalha com bottom: 0, porém como pode ser observado na imagem abaixo, alem do menu inferior eu possuo uma barra (footer) que preciso considerar.

Meu menu

Seu exemplo:

Se você puder me ajudar nisso também.

Desde já muito obrigado.

hufersil · Fevereiro 28, 2012

off = img.offset();

Recupera a posição da imagem dentro da janela.

A variável off conterá duas propriedades: left e top.

left => posição em pixels em relação à esquerda da janela.

top => posição em pixels em relação ao topo da janela.

dist = Math.sqrt(Math.pow(e.pageX - (off.left + img.width()/2), 2) + Math.pow(e.pageY - (off.top + img.height()/2), 2));

Esta é a fórmula para encontrar a distância entre dois pontos (ensino médio hehehe, lembrei do meu professor falando: "a hipotenusa ao quadrado é igual a soma dos quadrados dos catetos").

Neste caso, o ponto de origem é o mouse (representado pela variavel e, que é o evento disparado pelo JQuery) e o ponto de destino é o centro da imagem.

Na verdade, no meu exemplo, a imagem aumenta para baixo também, mas o que faz o efeito de ele ir para cima, e não para baixo, são os containeres anteriores (li e ul).

O seu deve estar indo para cima por conta do CSS aplicado, porque note que mesmo aumentando a imagem no seu exemplo, tanto vertical quanto horizontalmente, o container pai (li) continua do mesmo tamanho na horizontal (o icone de contatos não vai para o lado).

Isso indica, que você deve ter colocado, via CSS, um tamanho fixo para li ou para a âncora.

Tire estes valores do CSS e teste novamente para ver se funciona.

@braços e fique com Deus!

fernandotholl · Fevereiro 28, 2012

Obrigado pelos exclarecimentos Hugo!

Quanto ao CSS, removi o width e height da imagem, da âncora, e também da <li>, porém sem sucesso, o layout fica desconfigurado, mas o efeito continua indo para baixo.

hufersil · Fevereiro 28, 2012

bom, para funcionar o seu menu com essas div's, você deve ter aplicado via CSS nas li's:

display: block;
float: left;
margin-right: 10px; /* aqui é só um exemplo */

Porque eu repliquei esta sua estrutura e ficou uma bagunça sem um CSS apropriado.

Assim sendo, tinha que mudar a lógica.

Coloquei no meu servidor um exemplo diferente.

Você precisaria só colocar dentro de um container a sua UL.

Veja como ficou

@braços e fique com Deus! :thumbsup:

fernandotholl · Fevereiro 29, 2012

Caro @hufersil, simplesmente perfeito!!!

Funcinou corretamente, eu provavelmente estava utilizando algum css que deixava o efeito assim, eu fiz o menu do Zero com as dicas que você me passou o efeito agora está funcionando, inclusive com os textos em baixo, antes não animava.

Você alterou o Script certo? Vou colocar aqui pro pessoal ver também a alteração:

<script type="text/javascript">
		$(function(){
			var radius = 100;
			var maxZoom = 1.8;
			var minZoom = 1;
			var d=$('.dock');

			// vamos ajustar os elementos para ficarem
			// com posição absoluta.
			// Tambem guardamos alguns dados extras pra mais tarde.
			var idx=0;
			d.find('li').each(function(){
				var o = $(this).position();
				o.idx=idx++;
				o.w = $(this).width();
				$(this).css(o).data('off',o);
			});

			// soma da largura das li's
			var liWidth = (d.find('li').width() + parseFloat(d.find('li').css('marginRight')))*idx;
			// posicao inicial das li's
			var iniX = (d.parent().width() - liWidth)/2;

			// coloca todas as li em posicao absoluta
			d.find('li').css({position: 'absolute'});

			$(document.body).mousemove(function(e){
				d.find('img').each(function(){
					var img = $(this), nw, nh, z, pct, off, dist, ow, oh;

					img.width('').height('');
					nw = ow = img.width() * minZoom;
					nh = oh = img.height() * minZoom;
					img.width( nw ).height( nh );

					off = img.offset();
					dist = Math.sqrt(Math.pow(e.pageX - (off.left + img.width()/2), 2) + Math.pow(e.pageY - (off.top + img.height()/2), 2));

					if(dist < radius){
						pct = 1 - (dist/radius);
						z = 1 + ((maxZoom-1) * pct);
						nw = img.width() * z;
						nh = img.height() * z;
					}

					// sempre reajustamos a largura e altura
					img.width( nw ).height( nh );

					// reposicionamos os elementos
					var li = $(this).closest('li'), orig = li.data('off');
					li.css({
						top: orig.top - ((nh - oh)/2),
						left: iniX + ((orig.w + parseFloat(li.css('marginRight'))) * orig.idx)
					});
				});
			});
		});
	</script>

hufersil · Fevereiro 29, 2012

Sim, fiz umas pequenas alterações.

Inclusive no CSS.

@braços :thumbsup:

CYK · Julho 3, 2012

[..]pequenas alterações.

Inclusive no CSS.

Caro HUFERSIL,

Boa noite... Estou utilizando seu exemplo para fazer um menu animado como este do Fernando para meu site, mas como sou meio leigo em CSS e JavaScript, gostaria de saber se há uma forma de as imagens já ficarem centralizadas ao carregar a página HTML, pois testando seu exemplo, as imagens somente centralizam quando o mouse é movimentado sobre a área da página. Se existe uma forma de fazer isso, como fazê-lo?

Notei que você é desenvolvedor em Flash. Segundo a Google após algum tempo, a API do Google Maps somente vai funcionar mediante o uso de JavaScript. Sabe me informar se é possível utilizar a API Javascript v3 do Google Maps no Flash dentro de um stage utilizando AS3, ou seja sem abrir outra janela para mstrar o mapa?

Antecipadamente agradecido,

CYK

Arquivado

[Resolvido] Efeito Transição menu com Imagens

Recommended Posts

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

fernandotholl 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

hufersil 145

Compartilhar este post

Link para o post

Compartilhar em outros sites

CYK 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Fóruns

Tempo Real

Informação importante