David Walsh nos acerca un tutorial muy simple y efectivo de cómo lograr un efecto “Shake” con Mootools.

Añadir un poco de movimiento es ideal para llamar la atención en ciertas aéreas donde queremos que los usuarios presten atención.

Podríamos lograr este efecto a través de un archivo GIF o un archivo Flash, pero sería difícil de controlar y estaríamos limitados.

Por suerte existe un pequeño Plugin para Mootools que nos permite lograr este efecto: Fx.Shake.

Solo necesitamos seguir estos pasos:

1 XHTML

<div id="shaker">
	<a href="http://davidwalsh.name/"><img src="/dw-content/mootools-shake.png" alt="David Walsh Blog" /></a>
</div>

Como se puede apreciar es solo un DIV para lograr el “call out” con la imagen que deseamos mostrar.

2 MooTools Javascript

/* shake baby! */
window.addEvent('domready',function() {
	var shaker = $('shaker');
	shaker.setStyles({
		opacity: 0,
		display: 'block'
	});
	/* event */
	window.addEvent('load',function() {
		/* fade in */
		var x = function() { shaker.fade('in');};
		x.delay(1000);
		/* shake */
		var y = function() { shaker.shake('margin',5,3); };
		y.periodical(3000);
	});
});

Cada vez que se cargue la pagina pasara un segundo hasta que la animación se muestre con efecto “fade” y luego el comenzara a “sacudirse” periódicamente 3 veces a una distancia de 5 pixels.

Pueden ver el demo de la animación en David Walsh.

Articulo original: MooTools Fun with Fx.Shake