30 mar 2009
Como facer unha fermosa galería carteira usando jQuery Animate!
Publicado por: Mahbub In: Misc
Facendo unha páxina de carteira con Flash no seu sitio tornouse unha especie de obsoleto. Estes días, con máquinas máis rápidas e explorador nova xeración realmente pode chutar algúns traseiros con JavaScript e CSS. JQuery ten xeito moi elegante de tratar con algúns efectos. Todas as animacións derivan do método base chama "animar". Ela anima, tweens as propiedades dos elementos DOM. Para facer a longa historia curta dar un ollo niso.
Entón, xa premeu 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") concerto (); $ ("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 100 px é que o tamaño da máscara }); |
Usa a función animar para animar a máscara sobre a imaxe que se mantivo oculto durante posicionamento respecto. E con facilitando plugin, imos conseguir algún efecto legal de ir cando pasa fóra da imaxe. Podes poñer calquera html dentro dos elementos DIV info_container sempre que non supere as fronteiras. Olhe a folla de estilo e vai atopalo moi gramaticais. Pode personalizar as dimensións, modificando os graos div.
Inspiración: http://dibusoft.com/portfolio
Comentarios recentes