30 Mar, 2009
Paano gumawa ng isang magandang portfolio gallery gamit jQuery animate!
Posted by: Mahbub Sa: Misc
Paggawa ng isang portfolio pahina sa Flash sa iyong website ay naging uri ng lipas na. Mga araw na ito sa Mas mabilis na mga machine at bagong henerasyon ng browser ay maaaring talagang sipain ang ilang mga asno sa Javascript at CSS. JQuery ay may malinis na paraan upang makitungo sa ilang mga epekto. Ang lahat ng mga animation tangkay mula sa batayang pamamaraan na tinatawag na "animate". Ito animates, tweens ang mga katangian ng DOM elemento. Upang gawin ang mahaba kuwento maikli tumagal ng isang tumingin sa ito.
Kaya, ikaw ay nag-click at nakita karapatan? Ok, kung titingnan mo ang code, ito ay medyo simple.
$ (Dokumento). Handa (ang function () { var hover_in_easing = sa "easeOutExpo"; var hover_out_easing = sa "easeOutBounce"; . $ (". Info_container") ipakita (); $ (Sa "div.portfolio_div"). Pasadahan (ang function () { . $ (Ito) hanapin ("info_container.") Animate ({tuktok: "0px"}, {tagal: 400, easing: hover_in_easing}).; }, Ang function () { . $ (Ito) hanapin ("info_container.") Animate ({tuktok: "100px"}, {tagal: 500, easing: hover_out_easing}).; }); / / Ang 100 px ang laki ng mask });
Gumagamit ito ng ng animate function na upang bigyang-buhay ang mask sa imahe na kung saan ay pinananatiling nakatago sa pamamagitan ng pagpoposisyon relatibong. At sa easing plugin, makamit namin ang ilang mga magandang epekto ng malaki kapag pasadahan out ka mula sa mga imahe. Maaari mong ilagay ang anumang html sa loob ng mga elemento ng info_container div hangga't hindi ito pumunta sa kabila ng hangganan. Hanapin sa stylesheet at makikita ninyo ang mga ito napaka gramatical. Maaari mong ipasadya ang mga laki sa pamamagitan ng pagbabago sa mga klase ng div.
Inspirasyon: http://dibusoft.com/portfolio
Kamakailang Komento