Monday, January 21st, 2008
Effect.wobble and Effect.illuminate: iPhone effects in the browser
Category: JavaScript
, Library
Rakuto Furutani has taken inspiration from the iPhone (who hasn't at this point?) and implemented Effect.wobble and Effect.illuminate to mimic the effects on the iPhone:
JAVASCRIPT:
-
-
// Effect.wobble
-
$('img.wobble').each(function(img) {
-
img.observe('mouseover', function(event) { event.target.wobble({duration: 2, degree: 1.5}) });
-
});
-
-
// Effect.illuminate
-
$('illuminated_msg').illuminate({color: '#fff'});
-
You thought those effects were annoying on your iPhone ;)
1.7 rating from 39 votes
I guess it’s a nice “Why? Because we can” kind-of-effect but i don’t see any real world usages for this. Plus, the demo kicks my CPU usage from ~5% up to 86% on a 3ghz machine. I’m already sorry for the people who will use this on a slower machine :P
Its a nice effect but…
They are using canvas, so that image is redrawed over and over on each move, also thats not cross platform….
I would rather use SVG\VML image then use the angle attribute of it, it would be smother…
What is really interesting to me is the rotation abilities it introduce. That is pretty nice feature i would like to be able to use more often in my JS animations. Of course it has to be improved in terms of CPU usage but it is a great start.