Curl.js 1.2 allows you to add individual curls (inc. backside mask) to images on your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.

 

Setting Up

Download "curl.js" and include it into your webpage.

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

「curl.js」をダウンロードして、ウェブ・ページへそれを含めてください。

<スクリプト・タイプ=「text/javascript」src=「curl.js」></script>

Using It

To get the page curl effect just add a class="curl" to the image.

ページ・カール結果を得るために‥‥クラス=がイメージに「カールする」と単に付け加えます。

Classes

Demonstration

Shows some of the things "curl.js" does.

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

クラス=を備えた第1のイメージ「カール‥‥逆にする。」クラス=を備えた他のものは「isizeNをカールさせる」(異なるサイズ)...

beautiful girl


Scripting Curls

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.

柔軟性を望む場合は、「curl.js」の代わりに「cvi_curl_lib.js」を使用してください。ユーザ・アクション(例えばイメージがとどまられる場合、カール・サイズを変更して)にカールを応答させることができます。

Javascriptを使用して、イメージ・カールを加えます。
cvi_curl.add(イメージ、オプション);
イメージはイメージ要素であるべきです。オプションは、サイズに対する値を含むことができるか、あるいは陰にするか、色づくか、逆にすることができます。サイズと影に見合う価値は0と100の間にあるに違いありません。色に見合う価値は0と"#ffffffの間にあるに違いありません。」値‥‥のために‥‥逆にする‥‥ブールです。
Examples:
cvi_curl.add(document.getElementById("myimg"), { shadow: 75, color: 0 }); cvi_curl.modify(document.getElementById("myimg"), { size: 50 });
cvi_curl.add;(document.getElementById("myimg」)および{影:75は次のものに色をつけます:0}) cvi_curl.modify(document.getElementById(「myimg」)({サイズ): 50});
Click to add or remove curl
カールを加えるか削除するためにクリックしてください。

1
Move over to in/decrease curl
移動する‥‥の上に‥‥に/減少カールの中で

2
Move over to change curl
カールを変更するために席を譲ります
3
Mouse up/down to change curl
変更カールの上の/マウス
4

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. 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.
Javascriptを使用して、イメージ・カールを修正します。
cvi_curl.modify(イメージ、オプション);
イメージがカールだが指定されたサイズか、影を既に持っている場合‥‥あるいは色‥‥あるいは逆にする‥‥変わった、カールは従って変更されるでしょう。
Javascriptを使用して、イメージからカールを取り除きます。
cvi_curl.remove(イメージ);
セット・デフォルトはJavascriptを使用しています。
cvi_curl.defaultSize=サイズ;
cvi_curl.defaultShadow=影;
cvi_curl.defaultColor=色;
cvi_curl.defaultInvert=ブール;
デフォルト・サイズおよび影、および色を変更します。サイズのためのデフォルト値は33および影66のためにです。色のためのデフォルト値は0です。デフォルト値‥‥のために‥‥逆にする‥‥誤りです。
 

Why use Javascript Image Curls?

なぜJavascriptイメージ・カールを使用するのですか。

 

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

History

Version 1.2 Version 1.0