JavaScriptによる制御

Curl.jsはスクリプト(JavaScript)から制御することができます。スクリプトから制御する場合はcurl.jsファイルではなくcvi_curl_lib.jsファイルを代わりに読み込ませます。Curl.jsで用意されている命令は以下の3つになります。

cvi_curl.add(image, option) 効果を追加
cvi_curl.remove(image, option) 効果を削除
cvi_curl.modify(image, option) 現在の効果を変更

それぞれの命令の最初に効果を適用する画像のID名を指定しますが、cvi_curl.add()によって効果が適用された後は<canvas>タグのID名となる点には注意が必要です。optionは{ プロパティ名 : 値 }のプロパティリスト形式で指定します。指定できるオプション名は以下のようになります。

size めくれ具合(0～100)
shadow 加影(0～100)
color 画像の裏側の色 (カラーコード)

サンプル05では入力フォームのボタンをクリックすることで効果の適用、削除、変更を行なうことができます。cvi_curl.modifyとイベント、タイマーを組み合わせることでちょっとしたアニメーションも可能です。サンプル06では、マウスが画像上に乗るとゆっくりと画像の右下がめくれあがっていきます。ただし、Internet Explorerでは表示の際に不具合があり、画像や効果がずれてしまうことがあります。

Curl.jsは手軽に画像をめくれた感じにすることができます。ちょっとした画像のアクセントに使うとよいでしょう。

サンプル05の実行結果

ボタンを使って制御可能

サンプル05

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <title>curl.jsサンプル</title>
        <script type="text/javascript" src="js/cvi_curl_lib.js"></script>
        <script type="text/javascript"><!--
            // エフェクトを追加
            function addEffect(){
                var pObj = document.getElementById("myPhoto");
                cvi_curl.add(pObj, { size : 30, shadow : 20, color : "#ff00ff" });
            }
            // エフェクトを削除
            function rmEffect(){
                var pObj = document.getElementById("myPhoto");
                cvi_curl.remove(pObj);
            }
            // エフェクトを変更
            function modEffect(){
                var pObj = document.getElementById("myPhoto");
                cvi_curl.modify(pObj, { size : 70, shadow : 70, color : "#ffdf00" });
            }
        --></script>
    </head>
    <body>
    <h1>curl.jsサンプル</h1>
        <div>
            <img src="photo/004.jpg" id="myPhoto" width="192" height="108" alt="白糸の滝"><br>
            <form>
                <input type="button" value="追加" onClick="addEffect()">
                <input type="button" value="削除" onClick="rmEffect()">
                <input type="button" value="変更" onClick="modEffect()">
            </form>
        </div>
    </body>
 </html>

サンプル06の実行結果

マウスと連動して動作する

サンプル06

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <title>curl.jsサンプル</title>
        <script type="text/javascript" src="js/cvi_curl_lib.js"></script>
        <script type="text/javascript"><!--
            var count = 1;
            cvi_curl.defaultSize = count;
            cvi_curl.defaultColor = "#ff8040";
            cvi_curl.defaultShadow = 75;
            window.onload = function(){
                var pObj = document.getElementById("myPhoto");
                cvi_curl.add(pObj);
                pObj = document.getElementById("myPhoto");
                pObj.onmouseover = function(){
                    count = 1;
                    setTimeout("anim()", 100);
                }
            }
            function anim(){
                count+=10;
                var pObj = document.getElementById("myPhoto");
                cvi_curl.modify(pObj, { size : count, color : "#ff8022" });
                if (count < 100) {
                    setTimeout("anim()", 100);
                }
            }
        --></script>
    </head>
    <body>
    <h1>curl.jsサンプル</h1>
        <div>
            <img src="photo/005.jpg" id="myPhoto" width="192" height="108" alt="高原の朝">
        </div>
    </body>
 </html>