30 ožujak 2009
Kako napraviti prekrasne portfelja galeriju koristeći jQuery animiranu!
Posted by: Mahbub U: misc
Doing portfelja stranicu s Flash na Vašem website postala jedna vrsta zastario. Ovih dana s bržim strojeva i nove generacije preglednik stvarno može započeti neki dupe sa JavaScript i CSS. JQuery ima vrlo uredan način da se suoči s nekim efektima. Sve animacije proizlaze iz osnovne metode pod nazivom "živa". Oživljava, tweens svojstva DOM elemenata. Da bi duljimo pogledajte ovo.
Dakle, već ste kliknuli i vidjela zar ne? Ok, ako pogledate koda, to je prilično jednostavan.
$ (Document). Spreman (funkcija () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") pokazuju (); $ ("Div.portfolio_div"). Lebdjeti (funkcija () { . $ (Ova) pronaći ("info_container.") Animirati ({vrh: "0px"}, {trajanje: 400, easing: hover_in_easing}).; }, Funkcija () { . $ (Ova) pronaći ("info_container.") Animirati ({vrh: "100px"}, {trajanje: 500, easing: hover_out_easing}).; }); / / 100 px je veličina maske });
Ona koristi živog funkciju animirati masku preko slike koje se čuva skriven relativno pozicioniranje. A s easing plugin, ostvarujemo neke cool efekt poskakivanja kada prelazite iz slike. Možete staviti bilo koju HTML unutar info_container DIV elemenata dok to ne ide izvan granica. Pogledajte stylesheet i naći ćete ga vrlo gramatical. Možete prilagoditi veličina mijenjanjem div klase.
Inspiracija: http://dibusoft.com/portfolio
U zadnje vrijeme Komentirajte