Efeito jQuery para Reflexos e Sombras

Informações sobre a Publicação

Você está actualmente a ler:
Efeito jQuery para Reflexos e Sombras,
uma entrada em Web Grafismo.

Publicado: 11 Setembro, 2009 / 14:09

Categoria(s): Botões, Dicas

Efeito jQuery para Reflexos e Sombras

Subscreva via ♥ ♥ Partilhe no ♥ ♥ ♥ ♥ Email

Adrian Pelletier recentemente criou um efeito animado usando jQuery que simula reflexos e sombras em botões. A estrutura do código é muito semelhante a outros menus de navegação e pode ser muito facilmente adaptado. Descubra agora em que consistem os efeitos e como os pode implementar nas suas aplicações web.

Em que consiste o efeito

O JavaScript acrescenta o reflexo/sombra a cada “li”. Depois, anima a posição e a opacidade dos objectos, bem como os links assim que o rato está sobre os elementos. De modo a eliminar qualquer atraso que houvesse na interpretação no momento em que o rato está sobre e fora da navegação, foi adicionado um evento stop().

Efeito jQuery para obter Sombras

Efeitos jQuery Hover

Efeito jQuery para obter Reflexos

Efeitos jQuery Hover

Header da página HTML

<head>
	<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
	<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-ui-1.7.1.custom.min.js"></script>
	<script type="text/javascript" src="scripts/execute.js"></script>
</head>

Body da página HTML

<body>
<div id="content">
	<h1>Reflection</h1>
	<ul id="nav-reflection">
		<li class="button-color-1"><a href="#" title="My fancy link">Link Text</a></li>
		<li class="button-color-2"><a href="#" title="My fancy link">Link Text</a></li>
		<li class="button-color-3"><a href="#" title="My fancy link">Link Text</a></li>
		<li class="button-color-4"><a href="#" title="My fancy link">Link Text</a></li>
	</ul><!-- end reflection navigation -->
	<h1>Shadow</h1>
	<ul id="nav-shadow">
		<li class="button-color-1"><a href="#" title="My fancy link">Link Text</a></li>
		<li class="button-color-2"><a href="#" title="My fancy link">Link Text</a></li>
		<li class="button-color-3"><a href="#" title="My fancy link">Link Text</a></li>
		<li class="button-color-4"><a href="#" title="My fancy link">Link Text</a></li>
	</ul><!-- end shadow navigation -->
	<p>Read the full article <a href="http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/" title="View the full article on adrianpelletier.com">here</a>.</p>
</div><!-- end content -->
</body>

Função execute.js

// Begin jQuery
 
$(document).ready(function() {
 
/* =Reflection Nav
-------------------------------------------------------------------------- */
 
    // Append span to each LI to add reflection
 
    $("#nav-reflection li").append("<span></span>");
 
    // Animate buttons, move reflection and fade
 
    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });
 
/* =Shadow Nav
-------------------------------------------------------------------------- */
 
    // Append shadow image to each LI
 
    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');
 
    // Animate buttons, shrink and fade shadow
 
    $("#nav-shadow li").hover(function() {
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });
 
// End jQuery
 
});

Demonstração: http://adrianpelletier.com/sandbox/jquery_hover_nav
Download: Efeito jQuery Hover
Licença: Gratuito
Compatibilidade: Os Principais Browsers

♥ ♥

O plugin jQuery PhotoShoot oferece a possibilidade de converter qualquer div na sua página web numa área de disparo, simulando o efeito de uma câmara fotográfica. Com este plugin, dará aos visitantes do seu site a oportunidade de poderem tirar fotos à imagem de fundo da aplicação. Cada vez que é clicado numa determinada área, um [...]

♥ ♥

James Padolsey é um freelancer web developer de Hampton, UK. Ele escreve sobre front-end web development. O seu tópico preferido: Javascript. Este tutorial ensina-lhe a criar um layout assíncrono, levando o utilizador a interagir com a informação contida em várias páginas, sem haver refrescamento pelo browser. Instalação 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31  < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 [...]

Pedro Magalhães

Sobre o autor

User Interface Designer e Front End Developer. É autor do site Webgrafismo, onde dispõe novidades Open Source para Web Developers. Segue-o no twitter em @pedromagalhaes

Respostas a “Efeito jQuery para Reflexos e Sombras”

Miguel Tavares 11.09.2009 a 15:07
Mais algo a juntar aos meus bookmarks! Obrigado mais uma vez Pedro!
Pedro Magalhães 11.09.2009 a 16:16
De nada Miguel. Faz bom proveito ;) E obrigado pelo comentário
Julio Araujo 11.09.2009 a 21:45
Simples… mas eficiente.

Caro Pedro Magalhães, teus artigos estão me economizando um bom tempo quando preciso procurar por algum elemento de webdesign mais moderno. De já agradeço pelo compartilhamento de informações.

Abraços.