Falling Bubble (Web Study)

■　画像の上下移動　No.１
画像がゆっくりと左右に揺れながら、上下に移動する。シャボン玉がふわふわと登っていくイメージに利用できる。《編集方法》 <!--画像ファイルの指定-->と書いてある部分で動かしたい画像を指定する。画像は８個まで指定できる。次にJavaScript 内の画像の数、移動方向、移動速度、揺れ幅、揺れの周期、画像のサイズを適宜指定する。
サンプル表示

■　画像の上下移動　No.2
単純に画像が上から下に向かって移動する。雪が降ったり、あるいは落ち葉が散るようなイメージ表現に使える。《編集方法》 <!-- 画像の指定 -->と書いてある部分で動かしたい画像を指定する。指定できる画像は一種類のみ。
サンプル表示

■　画像の上下移動　No.3
こちらは非常に細かくパラメータが設定できるスクリプト。縦一列に移動させる事もできるし、画面いっぱいに降らせることもできる。また、一定の速度で移動したり、次第に加速させるような移動も可能である。《編集方法》 <!--画像の指定-->と書いてある部分で動かしたい画像を指定する。その際、id をサンプルのように img1～の連番で指定する。あとはスクリプト部分に書かれているコメントを参考にしながら各種のパラメータを指定する。
サンプル表示

The Web Dharma