Tuesday, September 18th, 2007

Curl.js: Curl your images

Category: Canvas, CSS, JavaScript, Library

Christian Effenberger has a new effect for you to use. With Curl.js you can add a page curl effect (including backside mask) to images on your web pages.

It uses unobtrusive javascript to keep your code clean, and it works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+,
IE6+ and Safari.

On older browsers, it’ll degrade and your visitors won’t notice a thing.

Includes also the scripting lib “cvi_curl_lib.js” for more advanced users.

All you have to do is include the JavaScript, and then add the right CSS classes to your images:

  • Initialisation class “curl
  • vary the size of the curl by adding isize followed by the desired size in percent:
    Curl size class “isize” – min=0 max=MinImageDimension default=33
  • vary the paperback color of the curl by adding icolor followed by the color:
    Curl color class “icolor” – min=000000 max=ffffff default=0
  • vary the shadow by adding ishadow followed by the opacity in percent:
    Curl shadow class “ishadow” – min=0 max=100 default=66


Posted by Dion Almaer at 11:26 am

4.2 rating from 63 votes


Comments feed TrackBack URI

People can build whatever they want and while I applaud the tremendous effort this is truly a big question of “Why?”

When would using this on a page be useful?

Comment by Ed Knittel — September 18, 2007

Pretty neat use of the canvas tag. There’s a lot of potential in the the effects Christian has been coming up with. For instance, also check out http://www.netzgesta.de/glossy/

Comment by Adam Sanderson — September 18, 2007

I think this is brilliant. @Ed, I think there are lots of good use for this. One I think of the top my head is to use this technique to make a transition from one image to the next (probably with some minor tweak or not). If someone writes a poker game, this or some derivative of it can be used to unfold the cards, or something like that. Anyway, with more solutions like this, web apps are no longer ‘boring’, I think.

Comment by Kevin Hoang Le — September 18, 2007

Christian is done a great work ;)

Comment by Andrés Testi — September 18, 2007

Excellent work. Using this script looks much faster and easier than using Photoshop or GIMP to achieve the same effect.

Comment by Will Peavy — September 18, 2007

I already have this effect on http://www.designexpanse.com. but I used something else. Its really great effect.

Comment by DESIGNEXPANSE.COM — September 19, 2007

Muy bueno!! gracias por compartir

Comment by Alexis — September 19, 2007

@Ed, I think this is brilliant. We definitely could have used this on a site we created for Savannah College of Art and Design, http://www.scadshorts.com. It would have eliminated the time it would take for a designer to create a minor, but eye-pleasing effect. There are new images uploaded every month, and with this script, anyone could upload a simple thumbnail and not have to do any Photoshop work whatsoever.


Comment by Matt Charpentier — September 19, 2007

I realize this may not be a problem to anybody else, but all of Christian’s scripts are not free to be used on commercial/public projects, which is weird since I can’t think of a whole lot of other things that are like that within the JavaScript development world. It’s good work, but I don’t know why he doesn’t release these into the wild.

Comment by Andrew — September 19, 2007

This would be so cool on a touch screen to make browsing like a physical magazine

Comment by reason why — September 20, 2007

I want to get the same animation for a regular web page. Imagine I flip the “paper” over and write some comments on the back of it. I’m going to have to read the script and see if I can find some ideas out of it…? If anyone knows how to flip over a regular “page”, please do let me know.

Comment by Liming — September 20, 2007

Leave a comment

You must be logged in to post a comment.