Shows some of the things curl.js does.

First Image with class = "curl invert", others with class = "curl isizeN" (different sizes)...

If you want flexibility, use "cvi_curl_lib.js" instead of "curl.js". You can make your curls respond to user actions (e.g. changing the curl size when the image is hovered over).

Click to add or remove curl

Move over to in/decrease curl

Move over to change curl

Mouse up/down to change curl

Download curl.js and include it into your webpage.

<script type="text/javascript" src="curl.js"></script>

To get the page curl effect just add a class="curl" to the image (minimum dimension: 64x64).

• 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
• vary the clipping by adding invert:
  Curl clipping class "invert"

If you want flexibility, use "cvi_curl_lib.js" instead of "curl.js". You can make your curls respond to user actions (e.g. changing the curl size when the image is hovered over).

Add image curl using Javascript

cvi_curl.add(image, options);
image should be an image element. options can contain a value for size, shadow, color or invert. The value for size and shadow should be between 0 and 100. The value for color should be between 0 and "#ffffff". The value for invert is boolean.

Examples:

cvi_curl.add(document.getElementById("myimg"), { shadow: 75, color: 0 }); cvi_curl.modify(document.getElementById("myimg"), { size: 50 });

Modify image curl using Javascript

cvi_curl.modify(image, options);
If the image has already a curl but the specified size or shadow or color or invert has changed, the curl will be changed accordingly.

Remove curl from an image using Javascript

cvi_curl.remove(image);

Set defaults using Javascript

cvi_curl.defaultSize = size;
cvi_curl.defaultShadow = shadow;
cvi_curl.defaultColor = color;
cvi_curl.defaultInvert = boolean;
Changes the default size and shadow and color and invert. The default value for size is 33 and for shadow 66. The default value for color is 0. The default value for invert is false.

• Fast and easy to implement. Just add class="curl" to the image and your good to go.
• Don't need to spend time in an image editor creating an image effect.
• Works really well with forum avatars. Doesn't require additional server work.
• It's dead easy to change the attributes of the images.
• Free of charge use on non-commercial and private web sites.

In older browsers, the script degrades and your visitors won't notice a thing.

Please read the License before you download curl.js 1.2

Please read the Frequently Asked Questions before you contact the author.

Version 1.2

• Added invert clipping

• Initial Release
  IE is unable to show a proper backside if the image is scaled.

Please leave any comments at this contact formular.

curl.js and cvi_curl_lib.js are distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.