0

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

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

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

 

 

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

DEMO

 

1.jqFloatをダウンロード

jqfloat-down

plugin-demo

プラグインを提供している「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」)

 

以上で完成です。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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