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.
rate = rate || 70;
duration = (60000/(4*rate)).toInt();
var parent = this.getParent();
if(parent != $(document.body) && parent.getStyle('position')=='static'){
var position = this.getStyle('position');
if(position=='static'){
position = 'relative';
if(Browser.Engine.trident){
var coords = this.getCoordinates(parent);
if(position == 'relative' && !Browser.Engine.presto){
coords.top -= parent.getStyle('paddingTop').toInt();
this.set('morph',{
transition:Fx.Transitions.Back.easeOut,
duration:duration
var hr = function(){
this.morph({
left: coords.left - radius,
width: coords.width + 2*radius,
height : coords.height + 2*radius
hr.call(this);
hr.periodical((60000/rate).toInt(),this);
return this;
Usage:
$('myOtherElement').beat(5); //Grow 5 pixels
$('anotherElement').beat(2,30); //Grow 2 pixels and beat 30 times per minutes
Demo:
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).