今回は４２回目です。
画像が上からゆらゆらと揺れながら落ちてきます。

水滴が落ちてくる
今回の効果は、画像が画面の上から揺れながら落ちてくるというものです。落ちる速さや揺れの幅は変えられます。
落ち方は結構自然な感じに近いので、ぎこちなさはあまり感じません。
ここでは水滴のような画像を使っていますが、花びらや落ち葉、雪などにしてみてもいいと思います。
今月も少しだけこの実験にお付き合い下さい。

ポイント ポイント mizu_num_maxで表示させる画像の最大数を指定します。ここでは３０個になっています。
＜ＢＯＤＹ＞タグの下に＜div class= という記述があると思いますが、ここのiLの数をmizu_num_maxで指定した数の分だけ書かなくてはいけません。つまり、mizu_num_maxで３０個指定したら、＜div class="img" id="iL0"＞から＜div class="img" id="iL29"＞まで３０個書かなければいけないということです。
var dx_spd は、横に揺れる速さの指定です。大きい数にすると速くなります。
var dy_spd は、縦に落ちる速さの指定です。大きい数にすると速くなります。
var dx_wide_min は横の揺れの最小幅です。小さくすれば小刻みに動きます。
var dx_wide_max は横の揺れの最大幅です。小さくすれば小刻みに動きます。
var dt_act は全体の処理速度です。大きくすると遅くなります。
効果 効果 var dx_spd と var dy_spd、 var dt_act で指定した速さで、var dx_wide_min と var dx_wide_max で指定した幅で揺れながら、上から画像が落ちてきます。
使い方 使い方 実際の実験画面のソースをご覧下さい。

今回の実験でわかったこと

この効果はＩＥは４．０からネットスケープは、Ｖｅｒ４．５からできます。

気をつけなければならないのは、画像の名前です。ここではmizu0.gif、mizu1.gif、mizu2.gif の３つの画像を使っています。この画像の名前を変えるとエラーが出てうまく動かなくなります。差し支えないようならこのままの画像の名前を使って下さい。
もし、どうしても変えたいならば、var mizu_num_max = 30; のmizu を 画像の名前（hana0.gif ならhana）に変えて下さい。
for(i = 0; i < mizu_num_max; i++){ も同じように変えて下さい。
あと、＜ＢＯＤＹ＞タグに onload="Init()" を記述するのを忘れないで下さい。


ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
超簡単ＨＰ実験室 実験室のトップページに