CSS3 + jQuery = “iPhone Delete” Wiggler

I thought I’d share Wiggler, a jQuery script that I put together to emulate the wiggle motion that iPhones use for their “delete app” animation. The JavaScript is simple and straightforward – it should be easy enough to add to your own web pages.

First off, a general piece of advice (probably obvious to most readers): before adding the Wiggler, make sure the page works and that everything looks fine in older browsers (make sure the link looks like a link without any CSS3 enhancement).

1) Add the JavaScript

Feel free to link to the copy on StripedCow.com (http://stripedcow.com/files/javascript/jquery/scripts/css3-wiggler-1.0.js) – you’ll get free updates as we make them and we promise not to break anything going forward.

<script src="http://…/css3-wiggler-1.0.js" type="text/javascript" />

2) Mark Up Elements

The code looks for the “css3-wiggler” class, simply add it to any element that you want to wiggle. For example:

<div class="css3-wiggler css3-stripedcow-icon"></div>
<a href="#" class="css3-wiggler">Does Not Work on Chrome?</a>

3) Done!

I felt like this needed to be a three step process.

Nothing special with the way the script works, a timer calls a small helper function which handles all of the logic go changing the angle of the element. I’m using the jQuery .data() method to store the current rotation angle and direction for the element. This is a great way of attaching element-specific data to the DOM without cluttering things (versus creating an attribute to store the data).

The downside of using .data() is the code won’t work on everything – object, applet, and embed elements won’t work properly.

The code requires CSS3’s ability to rotate an element and support for that is a little spotty – Firefox 3.5, Opera 10.5, and Safari 3.1/WebKit 525 have the ability to rotate, but it’s not always pretty or comprehensive (Chrome, for example, can’t rotate an anchor tag).

The code isn’t perfect, there’s a glitch here and there with detecting when the mouse is no longer hovering over the element. I’ll work on wrapping the code into a proper jQuery plugin and will keep you up to date.

Let us know if you have any problems or ideas for enhancing the code (for example, it would be easy enough to add options for the amount of angle and the speed of the wiggling, maybe I could add a blur effect).

Creative Commons License
CSS3 Wiggler by StripedCow is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Permissions beyond the scope of this license may be available at http://StripedCow.com/contact-us/.

[Lee Stewart]October 19, 2010