MooTools Fun with Fx.Shake

By  on  

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.

The XHTML

<div id="shaker">
	<a href="https://davidwalsh.name/"><img src="/demo/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!

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!

Recent Features

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    MooTools Fun with Fx.Shake

    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...

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

Discussion

  1. S4l1h

    Nice work

  2. 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 :)

  3. rpflo

    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/

  4. rpflo

    @ rborn

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

    There are plenty of smart ways to use this effect.

  5. christian

    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

  6. peter

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

  7. @christian: Come back tomorrow.. :)

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

  9. 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…

  10. 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’

  11. eli

    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

  12. 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.

  13. eli

    thanks Aaron Newton,

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

    thanks again

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

    Thanks
    http://www.watsnew.net

  15. 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??

  16. 404 Page that doesn’t exist.

    http://www.iluni.org/?option=com_404

    Note: This site using david’s script extensively.
    Thanks a lot.

  17. Steven Schrab

    This reminds me of the OS X bouncing dock icons when you launch them. I think I’ll add something like this to the U2U Mail icon on the forum I run.

  18. andrea

    Hi!

    Thanks David, for your interesting articles!!

    I found you while I was searching about shake effects. Concretely, I’m searching how to make the window object shakes!

    All codes I found were so odd that didn’t work properly cross-browser, you know … I’m so exhausted of testing ancient code!

    If someone knows how to do this effect, I’d like you share it with all of us!

    Thanks a lot!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!