赤とんぼ

●動作解析のヒント●
　レイヤーを使った動きのある装飾用品第４弾です。とりたてて解説する部分はありませんので、スクリプトのコメントを参考に解読してみてください。ちょっと凝ってるかな、と思うのは

///// 移動方向による画像の変更
function set_condition(index, info_x, info_z, z)
{
    if (IE4 == TRUE){zoom_image(index, z);}

    if (Math.abs(info_z) > Math.abs(info_x)){
        if (info_z >= 0){
            change_image(index, FRONT);
        } else {
            change_image(index, BACK);
        }
    } else {
        if (info_x >= 0){
            change_image(index, RIGHT);
        } else {
            change_image(index, LEFT);
        }
    }
}

///// イメージのズーミング(エクスプローラのみ有効)
function zoom_image(index, z)
{
    var size = z / DISP_DEPTH * ZOOM_MAX;
    if (size < ZOOM_MINI) size = ZOOM_MINI;

    document.all[index].document.images[index].width
        = Math.floor(IMG_WIDTH * size);
    document.all[index].document.images[index].height
        = Math.floor(IMG_HEIGHT * size);
}

でしょうか。左右・上下・前後(x, y, z)３次元の動きにあわせてトンボの向きと大きさが変化します。向きは左右・前後方向の移動開始点、終始点の差の正・負で分岐させ、大きさは前後方向の位置から算出しています。

　なお、対応するブラウザはマイクロソフト・インターネット・エクスプローラのみです。

●コンテンツのパーツに●
　著作権などという無粋なことはもうしません。コンテンツのパーツとして、どうぞご自由に改良、ご利用ください。

　スクリプトはこのページを保存していただき、画像はストップボタンを押して名前を付けて保存してください(左向き・右向き・前向き・後ろ向きの４種類)。

　利用方法は、<HEAD>と</HEAD>の間と<BODY>タグのすぐ下にスクリプト<SCRIPT LANGUAGE="JavaScript1.2">から</SCRIPT>まで(２つの部分に分かれます)を挟んで<BODY>タグの末尾に onLoad="init_0(); tombo();"と記入するだけです。

赤 と ん ぼ

赤とんぼ