30 Mar, 2009
How to make a beautiful portfolio gallery using jQuery Animate !
Posted by: Mahbub In: misc
Doing a portfolio page with Flash on your website has become kind of obsolete. These days with Faster machines and new generation browser can really kick some ass with Javascript and CSS. JQuery has very neat way to deal with some effects. All the animations stem from the base method called “animate”. It animates, tweens the properties of DOM elements. To make the long story short take a look at this.
So, you have already clicked and saw right? Ok, if you look at the code, it’s fairly simple.
$(document).ready(function(){
var hover_in_easing="easeOutExpo";
var hover_out_easing="easeOutBounce";
$(".info_container").show();
$("div.portfolio_div").hover(function(){
$(this).find(".info_container").animate({top:"0px"},{duration: 400, easing: hover_in_easing});
},function(){
$(this).find(".info_container").animate({top:"100px"},{duration: 500, easing: hover_out_easing});
});
// The 100 px is the size of the mask
}); |
It uses animate function to animate the mask over the image which is kept hidden by positioning relatively. And with easing plugin, we achieve some cool effect of bouncing when you hover out from the image. You can put any html inside the info_container DIV elements as long as it doesn’t go beyond the borders. Look at the stylesheet and you’ll find it very gramatical. You can customize the sizes by modifying the div classes.
Inspiration : http://dibusoft.com/portfolio
Recent Comments