Friday, June 15th, 2007
Instant: The polaroid of Ajax
Category: Canvas
, JavaScript, Library
The prolific Christian Effenberger has released another unobtrusive graphics library. This time he has shared Instant, a library that takes your images, and replaces them with tilted polaroid-like versions in-place.
Once you include the JavaScript, you just set a CSS class of instant on an image that you want to polaroid, and optionally tweak the settings (such as setting the tilt, color, and shadow amount). Then, the library, and Canvas will take care of everything.
HTML:
-
-
class="instant itiltleft icolor000000 ishadow50"
-
4.4 rating from 64 votes
Funny :)
“Supports all major browsers - degrades gracefully on IE…”
I dunno, I still might consider IE one of the major browsers. It’s myopic to think otherwise.
Agreed. It’s a very cool effect, and to his credit Christian states on the page that “through VML a canvas emulation in Internet Explorer will be done” — but it sure seems like a lot of Javascript developers these days feel that ignoring a browser with > 50% of market share (http://www.w3schools.com/browsers/browsers_stats.asp) is an acceptable trade-off for some eye-candy coolness.
It only takes 5 minutes to implement and fall in love with Instant :)
Here’s the Instant enabled version (labs) vs the regular one:
http://labs.focusfriends.net/
http://www.gadgetfriends.net/
Have you tried Moocanvas or excanvas for IE support?
http://olmo-maldonado.com/projects/moocanvas/
cheers, Ivo
http://www.web20friends.net
Looks very nice - but unobtrusive with that class? Shouldn’t such properties be defined within JavaScript itself and not within a class-attribute?
Like fetching all pictures with the class of “foobar” by a getElementsByClass and applying the properties to them within JavaScript?
Didn’t you hear? with Web2.0 - you can replace onEvent=”javascript” with class=”crazy ass class name that might as well be javascript and looks even more complicated” and still be considered unobtrusive, because you know - its using the class tag and all.
*and by tag, I mean attribute
Note: I still think the above is pretty cool, but it does make me scratch my head when all of these “unobtrusive” ways of doing things are pretty much using class to replace inline javascript, and agree with the above poster in how things should be done (in general, and not just specific to this) to really be unobtrusive
Doesn’t play nice with other scripts.. not even the same developer’s stuff.
I generally agree with that sentiment, but not so much in this case. Setting specific javascript code for how one image on a page should tilt strikes me as a greater failure in separating concerns than a “TiltLeft” class.
hm, i really love what the script does, but just tried to integrated it with lightwindow, doesn’t work. too bad.
Rather than using VML, it seems like it’d be easier to use directX filters to replicate the canvas functions in IE.
to kaniz and eric,
if you don’t tell me your problems (write e-mail), I can’t fix it!
to eric,
I’ve checked your Statement:
“tried to integrated it with lightwindow, doesn’t work”!
Send me your e-mail address and I will show you that instant.js works very well with lightwindow.
How about getting it to play with glossy.js ?
Today (sunday 17-Jun-2007) I wrote the IE emulation for glossy.js and instant.js
and uploaded both!
I dont understand what this does it do, cant you just make a image in photoshop like that then cut it up in to little pieces?
I think you might be missing the point Carl. Very nice Christian.
Christian - you’re misreading. The little arrow on the bottom of each comment points to the name of the person making it. I didn’t make that complaint.
Sorry Eric, my fault.
I’ve published two alternatives for “instant.js”.
“slided.js” creates slide frames and “filmed.js” creates film strips.