• かちびと.net

    要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.jsのご紹介です。アニメーションのあるサイトを作るときに役立ちそうですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js

スポンサーリンク

画像とかをフワフワ動かすやつです。
指定した要素を、指定どおりに継続
的にサイト内で動かします。CPUの
問題とかもあると思うので多用は
出来ないと思いますが、よく見かけ
るといえば見かけるので一応メモ。

オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。

jqFloat.js


いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。

見た方が早いですかね。公式デモです。

Demo

デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。


IEでも動く。


iPhoneでも動く。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jqfloat.min.js"></script>

本体とプラグインを読み込む。

$('#foo').jqFloat({
	width:10,
	height:50,
	speed:1800
});

こんな感じで設定する。あとはcssでpositionとかz-indexとか書けばいいみたいです。

設定値は他にも用意されています。ライセンスはGPL。詳しくは以下でどうぞ。

jqFloat.js

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services