Element.beat()

Snippets are small pieces of code that do not fit in the UvumiTools plugin category. Please note that each of these semi-useful functions requires Mootools 1.2.

Makes an element pulsate slightly. Purpose? None, other than to add some coolness to a logo, button, or other graphic element. Accepts two optional parameters: radius and rate. Radius defines how many pixels the element should inflate by . Default is 2. Rate is the number of beats per minute. Default is 70, the average human heart rate, but slower rates produce cooler effects.

Element.implement({
beat : function(radius,rate){
radius = radius || 2;
rate = rate || 70;
duration = (60000/(4*rate)).toInt();
var parent = this.getParent();
if(parent != $(document.body) && parent.getStyle('position')=='static'){
parent.setStyle('position','relative');
}
var position = this.getStyle('position');
if(position=='static'){
this.setStyle('position','relative');
position = 'relative';
}
if(Browser.Engine.trident){
parent.setStyle('height',parent.getStyle('height'));
}
var coords = this.getCoordinates(parent);
if(position == 'relative' && !Browser.Engine.presto){
coords.left -= parent.getStyle('paddingLeft').toInt();
coords.top -= parent.getStyle('paddingTop').toInt();
}
this.set('morph',{
link:'chain',
transition:Fx.Transitions.Back.easeOut,
duration:duration
}).store('coords',coords);
var hr = function(){
var coords = this.retrieve('coords');
this.morph({
top: coords.top - radius,
left: coords.left - radius,
width: coords.width + 2*radius,
height : coords.height + 2*radius
}).morph(coords);
};
hr.call(this);
hr.periodical((60000/rate).toInt(),this);
return this;
}
});

Usage:

$('myElement').beat();
$('myOtherElement').beat(5);       //Grow 5 pixels
$('anotherElement').beat(2,30);    //Grow 2 pixels and beat 30 times per minutes

Demo:

dummy

Of course, if you use this effect on an image like above, it probably won't look good in Internet Explorer 6 (For more IE sarcasms, see our other plugins and snippets).