Robiť portfólia stránku s Flashom na vašich webových stránkach sa stal druhom zastaraný. V týchto dňoch s rýchlejšími strojmi a novej generácie prehliadača môže naozaj nakopať prdel s Javascript a CSS. JQuery má veľmi elegantný spôsob, ako riešiť niektoré efekty. Všetky animácie vychádzajú zo základnej metódou zvanou "živé". To oživuje, doplnenie vlastností prvkov DOM. Ak chcete dlhý príbeh krátky pozrieť na tohle.
Takže ste už klikli a videl v poriadku? Ok, keď sa pozriete na kód, je to celkom jednoduché.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Pohybovať (function () { . $ (This) find ("info_container.") Animáciu ({top: "0px"}, {dĺžka: 400, uvoľnenie: hover_in_easing}).; } Function () { . $ (This) find ("info_container.") Animáciu ({top: "100px"}, {dĺžka: 500, uvoľnenie: hover_out_easing}).; }); / / 100 px je veľkosť masky });
Používa živé funkcie animovať masku cez obraz, ktorý je vedený skrytý umiestnenie relatívne. A uľahčenie plugin, môžeme dosiahnuť nejaké cool efekt poskakovanie, keď podržíte z obrázku. Môžete vložiť akýkoľvek HTML vnútri DIV prvky info_container ak to neprekračuje hranice. Pozrite sa na štýlov a nájdete ho veľmi gramatické. Môžete prispôsobiť veľkosti úpravou div triedy.
Inšpirácia: http://dibusoft.com/portfolio
Nedávne komentáre