30 mars 2009
Hvordan lage en vakker portefølje galleri ved hjelp jQuery Animer!
Skrevet av: Mahbub In: misc
Gjør en portefølje side med Flash på nettstedet ditt har blitt slags foreldet. I disse dager med raskere maskiner og ny generasjon nettleseren kan virkelig sparke litt rumpe med Javascript og CSS. JQuery har veldig ryddig måte å håndtere noen effekter. Alle animasjonene stammer fra basen metode kalt "animere". Det animerer, tweens egenskapene til DOM-elementer. For å gjøre lang historie kort ta en titt på denne.
Så, har du allerede klikket og så rett? Ok, hvis du ser på koden, er det ganske enkelt.
$ (Document). Klar (funksjon () { Var hover_in_easing = "easeOutExpo"; Var hover_out_easing = "easeOutBounce"; . $ (". Info_container") vise (); $ ("Div.portfolio_div"). Sveve (funksjon () { . $ (Denne) finne ("info_container.") Animere ({topp: "0px"}, {varighet: 400, lettelser: hover_in_easing}).; }, Funksjon () { . $ (Denne) finne ("info_container.") Animere ({topp: "100px"}, {varighet: 500, lettelser: hover_out_easing}).; }); / / Den 100 px er størrelsen på masken });
Den bruker animere funksjon å animere masken over bildet som holdes skjult av posisjonering relativt. Og med lettelser plugin, oppnår vi noen kule effekten av å hoppe når du holder ut fra bildet. Du kan sette noen html inni info_container DIV elementer så lenge det ikke går utover de grenser. Se på stilarket, og du vil finne det svært gramatical. Du kan tilpasse størrelsen ved å endre div klassene.
Inspirasjon: http://dibusoft.com/portfolio
Siste kommentarer