雲や気球など、ふわふわ~っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。
まずは、デモサンプルを確認してみてください。
1.jqFloatをダウンロード
プラグインを提供している「jqFloat」にもデモ画面が用意されているので、実際の動きを確認してみるのも良いでしょう。
2.jQueryとjqFloatを読み込む
jsフォルダの中に「jqfloat.js」を配置しました。
3.HTMLを記述
div#boxに対して「position:relative」、その中の#birdに対して「position:absolute」「top:0,left:0」で位置指定
4.JavaScriptを記述
#birdに対して、jqFloat()を実行し、その他オプションで移動距離やスピードを指定しています。
動かす要素を複数にしたい場合は以下のように記述します。
5.オプション設定
width | 左右に動く範囲を指定 |
height | 上下に動く範囲を指定 |
speed | 要素の動くスピードを指定(初期値は「1000」) |
以上で完成です。