30 mar 2009
Como facer unha galería carteira fermosa usando jQuery Animar!
Publicado por: Mahbub En: Varios
Facendo unha páxina de Cartafol con Flash na súa páxina web converteuse en especie de obsoleto. Estes días, con máquinas máis rápidas e navegador nova xeración realmente pode chutar algúns traseiros con Javascript e CSS. JQuery ten forma moi elegante de tratar con algúns efectos. Todas as animacións teñen lugar o método de base chamado "animado". Ela anima, tweens as propiedades de elementos DOM. Para facer a longa historia curta dar un ollo nisso.
Entón, xa clic e viu non? Ok, se ollar o código, é moi sinxelo.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Pair (function () { . $ (This) atopar ("info_container.") Animar ({top: "0px"}, {duration: 400, facilitando: hover_in_easing}).; } Función () { . $ (This) atopar ("info_container.") Animar ({top: "100px"}, {duration: 500, facilitando: hover_out_easing}).; }); / / O px 100 é o tamaño da máscara });
El usa a función animate para animar a máscara sobre a imaxe que é mantido escondido por posicionamento en relación. E coa flexibilización das plugin, podemos ter efectos legal de ir cando pasa o rato para fóra da imaxe. Podes poñer calquera html dentro dos elementos DIV info_container sempre que non vai alén das fronteiras. Olhe a folla de estilo e vai atopalo moi gramatical. Pode personalizar os tamaños, modificando as clases div.
Inspiración: http://dibusoft.com/portfolio
Comentarios recentes