Padaryti portfelio puslapį savo svetainėje su "Flash" tapo rūšies pasenęs. Šie dienų su greitesnis mašinų ir naujos kartos naršyklė tikrai gali ateityje kai asilas su JavaScript ir CSS. JQuery yra labai tvarkingas būdas spręsti su kai kuriais poveikio. Visos animacijos kyla nuo pagrindo metodą, pavadintą "Gyva". Jis gaivina, tweens DOM elementų savybes. Norėdami, kad ilga istorija trumpa, apsilankykite čia.
Taigi, jūs jau paspaudėte ir pamačiau teisė? Gerai, jei peržvelgsite kodo, tai gana paprasta.
$ (Document). Pasiruošęs (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; $ (". Info_container") rodo (); $ ("Div.portfolio_div"). Užveskite (function () { $ () ("Info_container.") Animuoti ({viršuje: "0px"}, {trukmė: 400, palengvinti: hover_in_easing}); }, Function () { $ () ("Info_container.") Animuoti ({viršuje: "100px"}, {trukmė: 500, palengvinti: hover_out_easing}); }); / / 100 px kaukės dydis });
Jis naudoja animate funkciją virš paveikslėlio, kuris yra laikomas paslėpta pozicionavimo santykinai animuoti kaukę. Ir palengvinti plugin, mes pasiekti puikų efektą šoktelėti, kai jūs Pakimba iš paveikslėlio. Jūs galite įdėti bet kokį html viduje info_container div elementais tol, kol neviršijama to, pasienyje. Pažvelkite į stilių ir jūs rasite jį labai Gramatical. Galite tinkinti dydžius pakeisti div klases.
Įkvėpimas: http://dibusoft.com/portfolio
Naujausi komentarai