30 mar 2009
Como fazer uma galeria portfolio bonita usando jQuery Animar!
Postado por: Mahbub Em: Diversos
Fazendo uma página de portfólio com o Flash em seu site tornou-se espécie de obsoleto. Estes dias, com máquinas mais rápidas e navegador nova geração realmente pode chutar alguns traseiros com Javascript e CSS. JQuery tem forma muito elegante de lidar com alguns efeitos. Todas as animações decorrem do método de base chamado "animado". Ela anima, tweens as propriedades de elementos DOM. Para fazer a longa história curta dar uma olhada nisso.
Então, você já clicou e viu né? Ok, se você olhar o código, é bastante simples.
$ (Document). Ready (function () { var hover_in_easing = "easeOutExpo"; var hover_out_easing = "easeOutBounce"; . $ (". Info_container") show (); $ ("Div.portfolio_div"). Pairar (function () { . $ (This) encontrar ("info_container.") Animar ({top: "0px"}, {duration: 400, facilitando: hover_in_easing}).; } Function () { . $ (This) encontrar ("info_container.") Animar ({top: "100px"}, {duration: 500, facilitando: hover_out_easing}).; }); / / O px 100 é o tamanho da máscara });
Ele usa a função animate para animar a máscara sobre a imagem que é mantido escondido por posicionamento relativamente. E com a flexibilização das plugin, conseguimos algum efeito legal de saltar quando você passa o mouse para fora da imagem. Você pode colocar qualquer html dentro dos elementos DIV info_container contanto que não vai além das fronteiras. Olhe para a folha de estilo e você vai encontrá-lo muito gramatical. Você pode personalizar os tamanhos, modificando as classes div.
Inspiração: http://dibusoft.com/portfolio
Comentários Recentes