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.

  1. class="instant itiltleft icolor000000 ishadow50"

Instant JS

Posted by Dion Almaer at 8:30 am

4.3 rating from 69 votes


Comments feed TrackBack URI

Funny :)

Comment by Калоян К. Цветков — June 15, 2007

“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.

Comment by Steve — June 15, 2007

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 ( is an acceptable trade-off for some eye-candy coolness.

Comment by Cal — June 15, 2007

It only takes 5 minutes to implement and fall in love with Instant :)

Here’s the Instant enabled version (labs) vs the regular one:

Have you tried Moocanvas or excanvas for IE support?

cheers, Ivo

Comment by Ivo — June 15, 2007

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?

Comment by Pelle — June 15, 2007

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.

Comment by kaniz — June 15, 2007

*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

Comment by kaniz — June 15, 2007

Doesn’t play nice with other scripts.. not even the same developer’s stuff.

Comment by Bob — June 15, 2007

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.

Comment by Eric — June 15, 2007

hm, i really love what the script does, but just tried to integrated it with lightwindow, doesn’t work. too bad.

Comment by Liming Xu — June 15, 2007

Rather than using VML, it seems like it’d be easier to use directX filters to replicate the canvas functions in IE.

Comment by Yansky — June 15, 2007

to kaniz and eric,

if you don’t tell me your problems (write e-mail), I can’t fix it!

Comment by Christian Effenberger — June 16, 2007

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.

Comment by Christian Effenberger — June 16, 2007

How about getting it to play with glossy.js ?

Comment by Bob — June 16, 2007

Today (sunday 17-Jun-2007) I wrote the IE emulation for glossy.js and instant.js
and uploaded both!

Comment by Christian Effenberger — June 17, 2007

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?

Comment by carl — June 18, 2007

I think you might be missing the point Carl. Very nice Christian.

Comment by Richard Kimber — June 19, 2007

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.

Comment by Eric — June 22, 2007

Sorry Eric, my fault.

Comment by Christian Effenberger — June 27, 2007

I’ve published two alternatives for “instant.js”.
“slided.js” creates slide frames and “filmed.js” creates film strips.

Comment by Christian Effenberger — July 18, 2007

Leave a comment

You must be logged in to post a comment.