Whenever a new version of your favorite software is released, it’s always exciting to look around and check out all of the new features. Sometimes, it takes several versions for a killer feature to be released; other times, it’s the little things that end up getting some attention.
For example, I’ve noticed several people that dig the shake effect WordPress 3 generates whenever you fail to correctly login to the administration area.
Although it’s simple, the little things often get attention. Here’s how you can add the same shake effect to any of your projects.
What’s Needed?
Like most modern web-based effects, the shake is achieved using jQuery and its effects library. Google caches both of these libraries for us, so there’s nothing to download.
You’ll also need an existing project or page containing an element to which you want to apply the effect. I’m using an example page. It includes a header, a basic paragraph, and a link that I can click to generate the effect:
My Title (It's Decent)
This represents a paragraph, albeit boring. Still, it demonstrates this stuff.
Notice that I already included the references to the necessary jQuery dependencies.
Make It Shake
In order to make an element shake, something has to happen (an event, specifically). In this demo, that event is triggered by clicking on the link; however, your particular implementation will vary.
Secondly, the shake() function is going to need three arguments: the ID of the element to shake, the number of times to shake said element, and how fast the shake should happen.
$(function() {
$('#hlShake').click(function() {
$('#container').effect('shake', { times: 3 }, 100);
});
});
That’s it. You can try messing around with the values to vary the effect. The jQuery API also provides more information.
John Saddington says
love this.
jeremiah says
Was looking for this, awesome.
Eric Dye says
😀
Jon says
Yep, just what I was looking for!