画像をカールさせるjavascript「curl.js」

サイト制作で画像を使うケースが多いですが、素人レベルでは撮影＆加工技術が限られてしまいます。
curl.jsはPhotoshopなどの画像編集ソフトを全く使用せず画像をめくった様に加工することが出来ます。

使用方法

curl.jsからダウンロードしたファイル群のうちcurl.jsを埋め込み、画像のclass属性にcurlを付与します。

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

<img src="画像" class="curl">

オプションには、カールサイズを調整する"isize"（default=33）、カールの背景色を変更する"icolor"（HEX指定）、影の透明度を調節する"ishadow"（default=66）があり、class="curl isize60 icolor000000 ishadow30"などと指定します。さらに、付属のcvi_curl_lib.jsを利用することで様々なエフェクトを使用できます。
詳しくはサンプルのソースをご覧下さい。

サンプル

Javascriptサンプルページ一覧

skuare.net

クリックでカールon/off

<div onclick="toggleCurl(document.getElementById('id名'));">

<img src="画像" id="id名">

<script type="text/javascript">

function toggleCurl(obj) {

	cvi_curl.defaultSize = 50;

	cvi_curl.defaultColor = "#ffeeaa";

	if(obj.tagName.toUpperCase() != 'IMG') {

		cvi_curl.remove(obj);

	}else {

		cvi_curl.add(obj);

	}

}

<script>

マウスオーバーでカールが収縮

<div onmousemove="increase(document.getElementById('id名'));">

<img src="画像" id="id名">

<script type="text/javascript">

var size = 100;

var direct = true;

function increase(obj) {

	var max = 100;

	if(obj.tagName.toUpperCase() != 'IMG') {

		if(!direct && size>5 || size>=max) {

			direct = false; size -= 5;

		}else if(direct && size<=5 || size
			direct = true; size += 5;

		}

		cvi_curl.modify(obj, {size: size });

	}

}

<script>

マウスオーバーでカール

<div onmouseover="cvi_curl.modify(document.getElementById('id名'), {size: 50 });" onmouseout="cvi_curl.modify(document.getElementById('id名'), {size: 5 });>

<img src="画像" id="id名">

クリックでカールの影を変更

<div onmouseup="cvi_curl.modify(document.getElementById('id名'), {color: 0 });" onmousedown="cvi_curl.modify(document.getElementById('id名'), {color: '#eeeeee' });">

<img src="画像" id="id名">