30. märts 2009
Kuidas teha ilus portfell galerii kasutades jQuery animeerimine!
Postitaja: Mahbub In: misc
Tee portfelli lehe Flash saidil on muutunud omamoodi vananenud. Nendel päevadel kiirem masinad ja uue põlvkonna brauser tõesti kick mõned perse Javascripti ja CSS. JQuery on väga puhas viis lahendada mõned mõjud. Kõik animatsioonid tulenevad baasi meetod nimega "elus". See elustab, tweens omadused DOM elemente. Et pikka lugu lühike, kui heita pilk see.
Niisiis, sa oled juba klõpsanud ja nägi eks? Ok, kui te vaatate koodi, see on üsna lihtne.
$ (Dokument). Valmis (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; $ (". Info_container"). Show (); $ ("Div.portfolio_div"). Hõljuma (function () { $ (This). Leida (". Info_container"). Animeerida ({top: "0px"}, {kestus: 400, lihtsustades: hover_in_easing}); }, Function () { $ (This). Leida (". Info_container"). Animeerida ({top: "100px"}, {kestus: 500, lihtsustades: hover_out_easing}); }); / / 100 px on suurus mask });
Ta kasutab elus funktsioon animeerida mask üle pildi, mida hoitakse peidetud positsioneerimine suhteliselt. Ja leevendada plugin, saavutame mõned lahedad mõju kopsakas, kui sa viid välja pilt. Võid panna kõik html sees info_container DIV elemente nii kaua, kui see ei lähe kaugemale piire. Vaata stiil ja leiad väga gramatical. Te saate kohandada suurused muutes div klassid.
Inspiratsioon: http://dibusoft.com/portfolio
Recent Comments