Through a wise use of jQuery UI effects and animation queues, we can actually achieve interesting results. But when we apply these effects to images, we can add an extra level of complexity to our code by dividing images and then applying sequential animations to each newly created image part. Parts are nothing more than empty HTML elements which have a different section of the image as their background image. Let's see how to accomplish this task.
Let's start from the very beginning: we create an empty element with stated dimensions and we apply a background image to it:
#image {
width: 423px;
height: 282px;
margin: 1.5em auto;
background: url(image.jpg) no-repeat;
cursor: pointer;
}
We want to divide this image into six different blocks. First, we need some general settings:
var img = $('#image');
var imgWidth = img.width();
var imgHeight = img.height();
var blockWidth = imgWidth / 3;
var blockHeight = imgHeight / 2;
var bg = img.css('backgroundImage');
img.css('backgroundImage', 'none');
To get a block's width we divide the width of the image by 3 and to get its height we divide in turn the image's height by 2. Then we store the original value of the background-image property in a variable and we delete the background image from the main block.
Now we can create our six blocks. Depending on their position within the parent block, they will feature a different value for the background-position property. Of course they will all share the same background image:
var blocks = function() {
var pos = '';
for (var i = 0; i < 6; i++) {
switch (i) {
case 0:
pos = '0px 0px';
break;
case 1:
pos = '-' + blockWidth + 'px 0px';
break;
case 2:
pos = '-' + (blockWidth * 2) + 'px -' + '0px';
break;
case 3:
pos = '0px -' + blockHeight + 'px';
break;
case 4:
pos = '-' + blockWidth + 'px -' + blockHeight + 'px';
break;
case 5:
pos = '-' + (blockWidth * 2) + 'px -' + blockHeight + 'px';
break;
default:
break;
}
$('<div class="image-block"/>').
css({
width: blockWidth,
height: blockHeight,
'float': 'left',
backgroundImage: bg,
backgroundPosition: pos
}).appendTo(img);
}
};
Almost done. Now we have to animate the newly created blocks when a user clicks on the parent block:
var explosion = function() {
var time = 0;
$('div.image-block', img).each(function() {
var $block = $(this);
$block.queue('explosion', function(next) {
$block.effect('explode', {
pieces: 4
}, time, next);
});
$block.dequeue('explosion');
time += 400;
});
};
We've created an animation queue on the six blocks. The explode effect is bundled with jQuery UI. Notice how we've used an incremental time span just to create a small delay between an effect and the next one.
You can see the demo and the complete code below.
