Gerçekçi Hover Efekti

Gerçekçi Hover Efekti

jQuery animasyon efektleri ile yapılmış çok hoş bir uygulama. İkon ve benzeri nesneleri hover özeliğine eklenen ufak bir animasyonla, gerçekçi havada kalma görüntüsü verebilirsiniz.

HTML ve CSS özelliklerini kullanarak birbirinden farklı menü ve navigasyon bölümleri yaratabiliyoruz. Bu kez işin içine biraz animasyon ve bolca jQuery ekleyerek, menümüzü daha eğlenceli hale getirebiliriz.

Önce bir demoya göz atalım

Öncelikle JS tüm li nesnelerine yansıma/gölge kazandırıyor, ardından mouse üzerine geldiğinde animasyon, şeffaflık ve pozisyon ayarlarını yapıyoruz.

 

// Begin jQuery $(Document).ready(function() { /* =Reflection Nav -------------------------------------------------------------------------- */ // Append span to each LI to add reflection $("#nav-reflection li").append(" "); // 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(''); // 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 });

 

Kaynak: http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/

SON BLOG YAZILARI

RSS Feed

Abone olun!
Blog sayfamıza RSS Besleme ile abone olun

İRTİBAT KURUN

Bizimle her türlü sorununuz hakkında irtibat kurabilirsiniz. İrtibat adresimiz ve telefonlarımız için iletişim sayfamıza göz atabilirsiniz.


Telefon: (212) 501 83 98
Mobil: (535) 363 05 99

Email: admin@militiaweb.com