30 Mar, 2009
Hvordan man laver en smuk portefølje galleriet med jQuery Animér!
Indsendt af: Mahbub I: misc
Gør en portefølje side med Flash på din hjemmeside er blevet slags forældet. Disse dage med hurtigere maskiner og nye generation browser kan virkelig sparke røv med Javascript og CSS. JQuery er meget pæn måde at håndtere nogle effekter. Alle animationer stammer fra basen metode, som kaldes "levende". Det animerer, Tweens egenskaber DOM elementer. For at gøre lang historie kort tage et kig på denne.
Så har du allerede klikket og så lige? Ok, hvis man ser på den kode, det er forholdsvist simpelt.
$ (Document). Klar (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") viser (); $ ("Div.portfolio_div"). Hover (function () { . $ (Denne) find ("info_container.") Animere ({top: "0px"}, {varighed: 400, letter: hover_in_easing}). }, Function () { . $ (Denne) find ("info_container.") Animere ({top: "100px"}, {varighed: 500, letter: hover_out_easing}). }); / / På 100 px er størrelsen af masken });
Den bruger levende funktion at animere masken over billedet, som holdes skjult positionering relativt. Og med lette plugin, opnår vi nogle cool effekt af at hoppe, når du svæver ud fra billedet. Du kan sætte en html inde i info_container DIV elementer, så længe det ikke går ud over grænserne. Kig på stilark, og du vil finde det meget gramatical. Du kan tilpasse størrelsen ved at ændre div klasser.
Inspiration: http://dibusoft.com/portfolio
Seneste kommentarer