アイコン画像やイラストが、ふわふわ浮かぶ「jqFloat」で遊び心を！

雲や気球など、ふわふわ～っと浮かばせたいイラストなどをWEBサイト上に配置したいときに、jQueryプラグインの「jqFloat」を使えば実現できます。

まずは、デモサンプルを確認してみてください。

1.jqFloatをダウンロード

プラグインを提供している「jqFloat」にもデモ画面が用意されているので、実際の動きを確認してみるのも良いでしょう。

2.jQueryとjqFloatを読み込む

jsフォルダの中に「jqfloat.js」を配置しました。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jqfloat.js"></script>

1 2	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/jqfloat.js"></script>

3.HTMLを記述

div#boxの中に、p#birdでimg画像を配置

1	div#boxの中に、p#birdでimg画像を配置

div#boxに対して「position:relative」、その中の#birdに対して「position:absolute」「top:0,left:0」で位置指定

ox {
	position: relative;
}
#bird {
	position: absolute;
	top: 0;
	left: 0;
}

ox {

position: relative;

}

#bird {

position: absolute;

top: 0;

left: 0;

}

4.JavaScriptを記述

#birdに対して、jqFloat()を実行し、その他オプションで移動距離やスピードを指定しています。

$(function() {
    $('#bird').jqFloat({
        width: 100,
        height: 100,
        speed: 500
    });
});

$(function() {

$('#bird').jqFloat({

width: 100,

height: 100,

speed: 500

});

動かす要素を複数にしたい場合は以下のように記述します。

$(function() {
    $('#bird-a').jqFloat({
        width: 100,
        height: 100,
        speed: 500
    });
     $('#bird-b').jqFloat({
        width: 100,
        height: 100,
        speed: 500
    });
     $('#bird-c').jqFloat({
        width: 100,
        height: 100,
        speed: 500
    });
});

$(function() {

$('#bird-a').jqFloat({

width: 100,

height: 100,

speed: 500

});

$('#bird-b').jqFloat({

width: 100,

height: 100,

speed: 500

});

$('#bird-c').jqFloat({

width: 100,

height: 100,

speed: 500

});

5.オプション設定

width	左右に動く範囲を指定
height	上下に動く範囲を指定
speed	要素の動くスピードを指定（初期値は「1000」）

以上で完成です。