MooTools Fun with Fx.Shake

Written by David Walsh on Monday, June 22, 2009

Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter MooTools javascript and Aaron Newton’s Fx.Shake effect.

View Demo

The XHTML

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

Just a DIV with my “call out” image and link inside.

The CSS

#shaker		{ position:fixed; top:10px; right:10px; width:299px; height:253px; display:none; }

I want to position the code in the top right corner of the page so it’s always visible.

The 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);
	});
});

Once the page loads, I wait 1 second before fading in the element. I then create a function that periodically shakes the element 5 pixels in distance 3 times. That’s it!

View Demo

It’s important not to make your image too large or shake too much. There’s a fine line between a solid attention-getting element and an annoying disturbance that makes users run for the hills. I should also mention that this class will need to be updated for MooTools 2.0.

As always, MooTools is shaking up the web!

Download PDF

Follow via RSS Epic Discussion

June 22 / #

S4l1h says:

Nice work

June 22 / #

rborn says:

I think you should stop shaking after 1 or 2 times, is getting annoying, and you only get that effect that makes me close the god damn site because of the too much yelling for attention :)

June 22 / #

rpflo says:

Sweet. I can pick this apart and see how the real developers do it.

I made something similar a while back for authenticating users:

http://ryanflorence.com/sandbox/mootools/Shake/

June 22 / #

rpflo says:

@ rborn

It’s just a demo. I’m sure we all agree with you :)

There are plenty of smart ways to use this effect.

June 22 / #

christian says:

Hello,

that’s great work! But I use jQuery, so I is there the option to make the same effect with this framework?

Best Wishes from Germany,

Christian

June 22 / #

peter says:

If you like this I know a <blink> tag that you’d love!

June 22 / #

David Walsh says:

@christian: Come back tomorrow.. :)

June 22 / #

David Walsh says:

@peter: I would disagree…because isn’t cross-browser compatible. :) In all honestly though, I think this is a touch classier.

June 22 / #

Aaron Newton says:

Note that MooTools 2.0 will just have a shake equation, so you’ll just use Fx.Morph without having to have a separate effect… That’s why I never released this really…

June 22 / #

olivier says:

I made my own version of the shake effect, not as fancy as Aaron’s code, but it’s also kinda cool, more random motion, which would be better discribed with ‘vibrate’

June 25 / #

eli says:

this is a nice,

im not sure if this is the right place to ask this but:

can someone let me know how i can download the full mootools library, the core and the more together, as i started reading the mootools book and it does recommend to get the full library – though im not sure how

once more (i understand this may not be the right place for this question) so im really sorry

June 26 / #

Aaron Newton says:

If you look in the book, there are instructions on page 2 and 3 with screenshots and everything. Just visit http://www.mootools.net and download away. Note that at present you can’t get the core and -more together in one single file from the site. You’ll have to download two and include them in your page.

June 26 / #

eli says:

thanks Aaron Newton,

the thing that confused me what that i thought there was a all in one file download,

thanks again

July 13 / #

Anas says:

Good thing. I could have used this. but its breaking in IE6. try it out….

Thanks
http://www.watsnew.net

August 27 / #

Gerardo PISD says:

It’s posssible with this demo, build this effect?
http://demo.yootheme.com/index.php?show=may09/
How can I made the movement of the background? the boat…

and almost the same effect…
http://devthought.com/projects/mootools/barackslideshow/
with the cloudy sky!!???

Any idea??