よく見かける演出です。 泡が空中に上がっていくように画像を下からゆっくりあげていく技です。 上がる速度、揺れる速度、幅など詳細な設定が可能で、動き方はランダムになっているため、 自然な動きに近いものになっています。
ご自分で画像を作れば何でも応用が利きます。
ヘッダにスクリプトを、本文にdiv要素にid属性を「iL0」「iL1」・・・のように連番でふって そのdiv要素内に画像を指定します。
泡の画像はスクリプトと一緒にダウンロードできます。ご自由にお使い下さい。 使う画像の種類は少ない方が読込時間が短く好ましいです。 画像の数は自由に設定できますので、同じ画像を何個も落としましょう。 その他にも下記のような項目の設定が可能です。
IE4,IE5,NN4 (N6はエスケープしています)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>泡</title> <style type="text/css"> <!-- .img{ position: absolute; visibility: hidden; } --> </style> <script language="javascript" type="text/javascript"> <!-- var snow_num_max = 30; // 最大画像数 var dx_spd = 2; // 横に揺れる速度 var dy_spd = 2; // 縦にあがる速度 var dx_wide_min = 20; // 横の揺れ最小幅 var dx_wide_max = 50; // 横の揺れ最大幅 var dx_margin = 20; // ウインドウに対する横端のマージン var dt_act = 4; // 処理速度 var TYPE = 2; // 画面上に達したときの処置:1=上に止まる,2=下から繰り返す var scrX,scrY; var dx = new Array(); var dy = new Array(); var sideTmg = new Array(); var sideFlag = new Array(); function Init(){ scrX = GetWindowSize("width"); scrY = GetWindowSize("height"); for(i = 0; i < snow_num_max; i++){ sideTmg[i] = 0; sideFlag[i] = true; z = dx_wide_max - dx_wide_min; dx[i] = Math.round(Math.random() * z + 0.5) + dx_wide_min; x = Math.round(Math.random() * scrX + 0.5) - dx_margin - dx_wide_max; x = Math.max(x,(dx_margin + dx_wide_max)); y = Math.round(Math.random() * scrY + 0.5) + scrY; SetLayer("iL"+i,"x",x); SetLayer("iL"+i,"y",y); SetLayer("iL"+i,"v","visible"); if(document.all){ SetLayer("iL"+i,"v","visible"); }else if(document.layers){ SetLayer("iL"+i,"v","visible"); }else if(document.getElementById){ SetLayer("iL"+i,"v","hidden"); } } XY(); } function XY(){ for(i = 0; i < snow_num_max; i++){ // direction X if(sideFlag[i]){ sideTmg[i] += dx_spd; if(sideTmg[i] >= dx[i]){ sideFlag[i] = !sideFlag[i]; } }else{ sideTmg[i] -= dx_spd; if(sideTmg[i] <= -dx[i]){ sideFlag[i] = !sideFlag[i]; } } if(sideFlag[i]){ x = GetLayer("iL"+i,"x") + dx_spd; }else{ x = GetLayer("iL"+i,"x") - dx_spd; } SetLayer("iL"+i,"x",x); // direction Y y = GetLayer("iL"+i,"y") - Math.round(Math.random() * dy_spd + 0.5) - 1; if(y <= 0){ switch(TYPE){ case 1: y = 0; break; case 2: y = Math.round(Math.random() * scrY + 0.5) + scrY; break; default: break; } } SetLayer("iL"+i,"y",y); } setTimeout("XY()",dt_act) } //ウインドウサイズ取得 function GetWindowSize(type){ switch(type){ case "width": if(document.all){ return(document.body.clientWidth); }else if(document.layers){ return(innerWidth); }else if(document.getElementById){ return(window.innerWidth); }else{ return(-1); } break; case "height": if(document.all){ return(document.body.clientHeight); }else if(document.layers){ return(innerHeight); }else if(document.getElementById){ return(window.innerHeight); }else{ return(-1); } break; default: return(-1); break; } } // レイヤーゲット function GetLayer(lay,dir){ if(document.all){ if(dir == "x"){ return(document.all(lay).style.posLeft); }else if(dir == "y"){ return(document.all(lay).style.posTop); }else{ return(-1); } }else if(document.layers){ if(dir == "x"){ return(document.layers[lay].left); }else if(dir == "y"){ return(document.layers[lay].top); }else{ return(-1); } }else if(document.getElementById){ if(dir == "x"){ return(parseInt(document.getElementById(lay).style.posLeft)); }else if(dir == "y"){ return(parseInt(document.getElementById(lay).style.posTop)); }else{ return(-1); } } } // レイヤーセット function SetLayer(lay,dir,z){ if(document.all){ if(dir == "x"){ document.all(lay).style.posLeft = z; }else if(dir == "y"){ document.all(lay).style.posTop = z; }else if(dir == "v"){ document.all(lay).style.visibility = z; } }else if(document.layers){ if(dir == "x"){ document.layers[lay].left = z; }else if(dir == "y"){ document.layers[lay].top = z; }else if(dir == "v"){ if(z == "visible"){ z = "show"; }else{ z = "hidden"; } document.layers[lay].visibility = z; } }else if(document.getElementById){ if(dir == "x"){ document.getElementById(lay).style.posLeft = z; }else if(dir == "y"){ document.getElementById(lay).style.posTop = z; }else if(dir == "v"){ document.getElementById(lay).style.visibility = z; } } } // --> </script> </head> <body onload="Init()"> <div class="img" id="iL0"><img src="image/awa0.png" alt=""></div> <div class="img" id="iL1"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL2"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL3"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL4"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL5"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL6"><img src="image/awa0.png" alt=""></div> <div class="img" id="iL7"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL8"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL9"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL10"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL11"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL12"><img src="image/awa0.png" alt=""></div> <div class="img" id="iL13"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL14"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL15"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL16"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL17"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL18"><img src="image/awa0.png" alt=""></div> <div class="img" id="iL19"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL20"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL21"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL22"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL23"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL24"><img src="image/awa0.png" alt=""></div> <div class="img" id="iL25"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL26"><img src="image/awa2.png" alt=""></div> <div class="img" id="iL27"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL28"><img src="image/awa1.png" alt=""></div> <div class="img" id="iL29"><img src="image/awa2.png" alt=""></div> </body> </html>