画像をボールのように弾ませます。
弾む画像
| 今回の効果は、文字や画像がボールが弾むように上下に弾んで、最後に止まるというものです。 アニメーションを使わないで、動きのあるページを作ることができます。 動かす文字や画像によって、弾む速さや回数を調節して遊んでみたら楽しいのではないでしょうか？ JavaScript を使用していますが、そんなに長いものではないので、自分に必要な部分だけ変更して色々試して見て下さい。 今月も少しだけこの実験にお付き合い下さい。 |
 ポイント | dy で、弾んで上に戻る幅が決まります。あまり大きい数を入れると、上に戻りすぎて画面からいなくなってしまうので注意。 baseY で、弾む幅の一番底辺の位置を決めます。 time で、弾むスピードを決めます。小さいと速くなり、大きいと遅くなります。 |
 効果 | ｂｏｄｙの下のＤＩＶタグ中で指定してある STYLE="position:absolute;left:150px;top:40px;" のtop の位置から、baseY で指定した位置までの間を、time で指定した速さで弾みます。ここでは top:40px; となっているので、最初のスタートが画面の上から４０ピクセルの所になります。 |
 使い方 | 実際の実験画面のソースをご覧下さい。 |
今回の実験でわかったこと
| この効果は、Ｎｅｔｓｃａｐｅ４．０、Ｅｘｐｌｏｒｅｒの４．０からできます。 ｂｏｄｙの中のＤＩＶタグ中で、 STYLE="position:absolute;left:150px;top:40px;" と指定しないと、ネットスケープとエクスプローラで、表示される画像（あるいは文字）の位置がずれるようです。 STYLE="position:absolute;left:150px;top:40px;" でｌｅｆｔからの位置、ｔｏｐからの位置を指定すれば、両方同じ位置に表示されます。 |
ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
