30 Mar, 2009
Cara membuat galeri portofolio indah menggunakan jQuery Animate!
Posted by: Mahbub In: misc
Melakukan halaman portofolio dengan Flash di website Anda telah menjadi semacam usang. Hari-hari ini dengan mesin yang lebih cepat dan browser generasi baru benar-benar bisa menendang pantat beberapa dengan Javascript dan CSS. JQuery memiliki cara yang sangat rapi untuk menangani beberapa efek. Semua animasi berasal dari metode dasar yang disebut "bernyawa". Ini menjiwai, remaja sifat-sifat unsur DOM. Untuk membuat cerita panjang pendek melihat ini.
Jadi, Anda telah mengklik dan melihat kan? Ok, jika Anda melihat kode, itu cukup sederhana.
$ (Dokumen) siap (function (). { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Membawa (function () { . $ (Ini) menemukan ("info_container.") Bernyawa ({atas: "0px"}, {duration: 400, mengurangi: hover_in_easing}).; }, Function () { . $ (Ini) menemukan ("info_container.") Bernyawa ({atas: "100px"}, {duration: 500, mengurangi: hover_out_easing}).; }); / / The 100 px adalah ukuran masker });
Menggunakan fungsi animate untuk menghidupkan topeng atas gambar yang disembunyikan oleh posisi relatif. Dan dengan mengurangi plugin, kami mencapai beberapa efek dingin mental ketika Anda membawa keluar dari gambar. Anda dapat menempatkan html apapun di dalam elemen DIV info_container asalkan tidak melampaui batas. Lihatlah stylesheet dan Anda akan merasa sangat gramatical. Anda dapat menyesuaikan ukuran dengan memodifikasi kelas div.
Inspirasi: http://dibusoft.com/portfolio
Recent Comments