Narediti portfelja stran s Flash na vaši spletni strani je postal neke vrste zastarele. Te dni s hitrejšimi strojev in nove generacije brskalnik lahko resnično kick nekaj riti z Javascript in CSS. JQuery je zelo čeden način za obravnavo nekaterih učinkov. Vse animacije izhajajo iz osnovnega metodo, imenovano "Animate". To animira, tweens lastnosti elementov DOM. Da bi zgodbo, da pogled na to.
Torej, ste že kliknili in videl, kajne? Ok, če pogledaš na kodo, je dokaj preprost.
$ (Dokument). Pripravljen (funkcija () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") kažejo (); $ ("Div.portfolio_div"). Hover (funkcija () { . $ (Ta) našli ("info_container.") Animacijo ({vrh: "0px"}, {trajanje: 400, lajšanje: hover_in_easing}).; }, Funkcija () { . $ (Ta) našli ("info_container.") Animacijo ({vrh: "100 pik"}, {trajanje: 500, lajšanje: hover_out_easing}).; }); / / 100 px je velikost maske });
Uporablja žive funkcijo animirati masko preko slike, ki ga vodi skrita relativno pozicioniranje. In lajšanje plugin, smo dosegli nekaj kul učinek odbijal ko hover ven iz slike. Lahko dajo vse HTML znotraj DIV elementov info_container, dokler ne gre čez meje. Poglej slogovne in boste našli zelo gramatical. Lahko prilagodite velikosti s spremembo DIV razrede.
Navdih: http://dibusoft.com/portfolio
Zadnji komentarji