30 març 2009
Com fer una galeria de cartera bella usant jQuery Anima't!
Publicat per: Mahbub En: miscel · lanis
Fer una pàgina de la cartera amb Flash al seu lloc web s'ha convertit en espècie de obsolet. En aquests dies amb les màquines més ràpides i el navegador de nova generació realment pot donar-li una puntada al cul amb Javascript i CSS. JQuery té forma molt clara per fer front a alguns efectes. Totes les animacions es deriven del mètode de base anomenada "animat". Anima, interpolar les propietats dels elements DOM. Per fer el conte llarg fer una ullada a això.
Per tant, ja has fet clic i va veure la dreta? Bé, si ens fixem en el codi, és bastant simple.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Planen (function () { . $ (This) find ("info_container.") Anima't ({top: "0px"}, {duration: 400, el que facilita: hover_in_easing}).; }, Function () { . $ (This) find ("info_container.") Anima't ({top: "100px"}, {duration: 500, el que facilita: hover_out_easing}).; }); / / El px 100 és la mida de la màscara });
Utilitza la funció d'animar a animar la màscara sobre la imatge, que es manté ocult per la posició relativa. I amb l'alleujament del plugin, podem aconseguir un efecte fresc de rebot quan es passa fora de la imatge. Vostè pot posar tot el codi HTML dins dels elements DIV info_container, sempre que no vagi més enllà de les fronteres. Mira el full d'estils i vostè ho trobarà molt gramatical. Podeu personalitzar la mida mitjançant la modificació de les classes div.
Inspiració: http://dibusoft.com/portfolio
Comentaris recents