フェードインの2

このページでも、フェードインが使われています。
1 6進数に変換しているので、MSIE 3.0でも表示可能です。
フェードイン速度を調節することもできます。



 ●ソース

フェードイン

<SCRIPT language="JavaScript">
<!--
hexa = "0123456789abcdef"

function changehex(num){
    return hexa.charAt(num)
}

function hex(i) {
    if (i < 0)
        return "00"
    else if (i > 255)
        return "ff"
    else
        return "" + changehex(Math.floor(i/16)) + changehex(i%16)
}

function setbgColor(r, g, b) {
    var hr = hex(r); var hg = hex(g); var hb = hex(b);
    document.bgColor = "#"+hr+hg+hb
}

function fade(sr, sg, sb, er, eg, eb, step) {
    for(var i = 0; i <= step; i++) {
        setbgColor(
            Math.floor(sr * ((step-i)/step) + er * (i/step)),
            Math.floor(sg * ((step-i)/step) + eg * (i/step)),
            Math.floor(sb * ((step-i)/step) + eb * (i/step))
        );
    }
}

fade(255,255,255,255,0,0,80)  //ユーザー設定箇所
fade(255,0,0,255,255,255,80)  //ユーザー設定箇所
// -->
</script>
はじめに文字列hexaを定義して、16進数を作るための文字列を作ります。
charAt()メソッドでその文字列からnum番目の文字を取り出すことで16進数へと変えます。(先頭から0,1,2,,という順番になります)
関数 fadeで赤、緑、青の値を計算しています。
ユーザー設定箇所は、スタート時の赤、緑、青の値、終了時の赤、緑、青の値、ステップ数の値 の順番になります。
色の値は0から255までで設定します。いろいろ変えてみてください。
なお、フェードイン速度はコンピュータの処理速度によりだいぶ異なります。必要以上に大きな値を入れると速度の遅いマシンのユーザーがかわいそうです。この設定では MMX Pentium166MHzで0.5秒、Pentium75MHzで 3秒程度です。

[98.04.12追記] 上に書いたフェードイン速度は、Netscape3.0/MSIE3.0での値です。4.0ブラウザの場合、JavaScriptの処理速度は極めて遅くなります。

[2000.03.13追記] このスクリプトを HEAD中に書くと、IE5.1では動作しないようです。
BODYの直後に書くようにしてください。
また、背景画像があるとできないようです。

背景色フェードインの1へ戻る

背景色変更へ戻る


[★高収入が可能!WEBデザインのプロになってみない?! Click Here! 自宅で仕事がしたい人必見! Click Here!]
[ CGIレンタルサービス | 100MBの無料HPスペース | 検索エンジン登録代行サービス ]
[ 初心者でも安心なレンタルサーバー。50MBで250円から。CGI・SSI・PHPが使えます。 ]


FC2 キャッシング 出会い 無料アクセス解析