Gerçekçi Hover Efekti
19.09.2009 jQuery Pluginleri
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.
Ö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.
');
// 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
- Seo 404 Çalışması 28.04.2010 SEO
- Description ve Keyword gerekli midir? 12.02.2009 SEO İpuçları
- Gelişmiş Black-Hat Seo Teknikleri 02.12.2009 SEO İpuçları
- Fullsize: Yeni IMG Etiketi Özelliği 10.07.2009 jQuery Pluginleri
- Kayan Üye Paneli 19.09.2009 jQuery Pluginleri
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
