Click effect for jQuery

Today I’ve been playing for a while with javascript. The truth is that I haven’t found what I was looking for, but let’s assume that this is because I’m a programmer and not a designer.

Anyway, what I was trying to do is to create some kind of click effect. Ok, let me try again. What I wanted to do, is that when someone clicked on a link, that some kind of circle/rectangle/whatever expanded disappearing. Let’s try with an example. Have you seen those TV ads for games for the Wii? At the beginning there are like three or four circles that disappear. Something like that, but less sophisticate is what I wanted to do.

After trying several things, even after playing with images, I come up with a solution that is quite aproximated, although still needs something extra I don’t know how to do.

The example has two interesting parts.

The first part is where the effect is associated to the elements of class ‘clickable-round’. When you click on any ‘clickable-round’ element, a circle will appear and diffuminate:

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');
});

The other interesting fragment associated the event to the elements that contain the class ‘clickable-square’. When you click on any of those elements, the effect will be quite similar to the previous one, but instead of drawing a circle, a square that will go from one pixel to the width and height of the clicked object will appear.

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);
});

If you want to play with the plugin, my advice is that you start playing with the border width, border color, the duration, or even the size of the circle/rectangle…

You can use this javascript for any personal or commercial application, or do whatever you want with it.

Finally, I would appreciate any comment for improving the effect.

Trackback URL

, , ,

Comments are closed.