Tuesday, September 18th, 2007
Curl.js: Curl your images
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
4.3 rating from 58 votes
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?
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/
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.
Christian is done a great work ;)
Excellent work. Using this script looks much faster and easier than using Photoshop or GIMP to achieve the same effect.
I already have this effect on http://www.designexpanse.com. but I used something else. Its really great effect.
Muy bueno!! gracias por compartir
@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.
http://www.scadshorts.com
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.
This would be so cool on a touch screen to make browsing like a physical magazine
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.