Efeito jQuery para Reflexos e Sombras
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
Efeito jQuery para obter Reflexos
Header da página HTML
1 2 3 4 5 6 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | // 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, [...]
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 [...]
As galerias de imagens e os sliders jQuery são muito comuns em sites de portefólio e, são muito úteis para qualquer outro site que pretende mostrar imagens e fotografias. Felizmente, adicionar uma galeria jQuery não precisa de ser difícil, mesmo que você não tenha muita experiência com JavaScript e jQuery. Neste artigo encontra tutoriais & [...]
Você provavelmente já viu alguns destes tipos de publicidade onde um papel dobrado no canto da página do website mostra uma mensagem. SohTanaka criou um tutorial para este efeito: Simple Page Peel Effect with jQuery & CSS. Tudo que ele está a fazer é expandir a imagem quando o rato está sobre, depois retrai-a para [...]
Mais algo a juntar aos meus bookmarks! Obrigado mais uma vez Pedro!
De nada Miguel. Faz bom proveito ;) E obrigado pelo comentário
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.