, Mar 30, 2009
JQuery animasyon kullanarak güzel bir portföy galeri yapmak için!
Gönderen: In Mahbub: misc
Web sitenizde Flash ile bir portföy sayfası yapmak eskimiş tür haline gelmiştir. Daha hızlı makineler ve yeni nesil tarayıcı ile bu gün gerçekten Javascript ve CSS ile bazı kick ass olabilir. JQuery bazı etkileri ile başa çıkmak için çok düzgün bir yol var. Tüm animasyonlar "animate" olarak adlandırılan temel yöntemi kaynaklanıyor. Bu animasyon, DOM elementlerin özelliklerini doldurur. Uzun lafın yapmak için kısa, bu bir göz atın.
Yani, zaten tıkladığınızda ve sağ gördü? Kod bakarsanız Tamam, bu oldukça basit.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container")) (göstermek; $ ("Div.portfolio_div"). (Function () {hover . $ (This) (". Info_container") bulmak animate ({top: "0px"}, {süresi: 400, hafifletilmesi: hover_in_easing}).; }, Function () { . $ (This) (". Info_container") bulmak animate ({top: "100px"}, {süresi: 500, hafifletilmesi: hover_out_easing}).; }); / / 100 px maskesi boyutu });
Nispeten konumlandırma tarafından gizli tutulur resmin üzerine maske animasyon animasyon işlevini kullanır. Ve eklenti kolaylaştırılması ile, sizin görüntüden dışarı getirdiğinizde sıçrayan bazı serin etkisi elde. Bu sınırların ötesine geçmez gibi sürece info_container DIV öğeleri içinde herhangi bir html koyabilirsiniz. Stil bak ve çok gramatical bulacaksınız. Sen div sınıfları değiştirerek boyutları özelleştirebilirsiniz.
İlham: http://dibusoft.com/portfolio
Son Yorumlar