cool jQuery animation effect gallery

Today we would like to show you how to create a modern gallery (with cool animation effect) using Raphael library and jQuery.

 

Create three files: index.html, default.css, init.js and download Raphael library. Then include all files in your head section:

 

Let’s begin with lay down a simple HTML markup.

index.html

We are creating main container called ‘gallery’, which holds unordered list with images. All images have size 400px on 400px.

default.css

ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}

.gallery ul li {
width:200px; /* a half of image width */
height:200px; /* a half of image height */
margin:0 10px 10px 0;
float:left;
position:relative;
}

.holder {
position:absolute;
top:0;
left:0;
margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */
}

As you see, it is very short style file. I give you a free hand!

init.js

$(function(){

var li = $('.gallery').find('li'); // find all 'li' elements

li.each(function(i){
var t = $(this),
img = t.find('img'), // find image in 'li' element
src = img.attr('src'), // get path to your image
width = li.width(), // get 'li' width
height = li.height(); // get 'li' height

img.hide().after($('

').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects

var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables

rimg.hover(function(event) {
this.animate({
scale: 2, // enlarge your images to the normal size
rotation : 360
}, 1200, 'elastic');
}, function (event) {
this.animate({
scale: 1, // decrease size of images
rotation : 0
}, 1200, 'elastic');
});

});

li.hover(function(){
li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
$(this).css({ 'z-index': 2 }); // set z-index to the hovering element
});

});

Download: http://www.htmldrive.net/items/download/827

Be Sociable, Share!

Leave a comment