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 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!
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 :)
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/
@ rborn
It’s just a demo. I’m sure we all agree with you :)
There are plenty of smart ways to use this effect.
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
If you like this I know a <blink> tag that you’d love!
@christian: Come back tomorrow.. :)
@peter: I would disagree…because
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…
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’
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
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.
thanks Aaron Newton,
the thing that confused me what that i thought there was a all in one file download,
thanks again
Good thing. I could have used this. but its breaking in IE6. try it out….
Thanks
http://www.watsnew.net
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??
404 Page that doesn’t exist.
http://www.iluni.org/?option=com_404
Note: This site using david’s script extensively.
Thanks a lot.
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.
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!