memocarilog

簡単な指定で、画像や要素をふわふわ浮せたり、小刻みにふるえさせることができるjQueryプラグインのjqFloatの使い方などです。

たくさん使うとイライラする感じになってしまいますが、控えめに使えばふわふわかわいく楽しい雰囲気を演出できます。IE6でもちゃんと動きました。

「サンプル」も作りました。

デモ

jqFloat.js Demonstration

ダウンロード

以下のアドレスよりプラグインのダウンロードが可能です。

jqFloat.js – A Floating Effect with jQuery!

使い方

ヘッド内で以下の様にjQuery本体とプラグインを読み込みます。
jQuery本体は1.7.1以上が推奨のようです。

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

続けて以下の様にヘッド内へ記入します。

<script>
$(document).ready(function() {
   $('#ふわふわさせる要素').jqFloat();
});
</script>

プラグインの記述は基本的には以上のみでも動きます。
あとはCSS側でふわふわさせたい要素に position: absolute; で位置指定します。

オプション

オプションを指定する事で動く範囲やスピードを指定する事が可能です。メソッドの指定( Play と Stop )で何かのアクションで動いたりも指定可能です。

・ width
横に動く範囲。数字を指定。

・ height
縦に動く範囲。数字を指定。

・ speed
動くスピードを指定。数字を指定。( デフォルト1000）

サンプル

サンプルページ：jqFloat.js｜memocarilog demo

サンプルで使用したイラストは”商用可能な無料(フリー)のイラスト素材ストックマテリアル”と、FOTOLIA/フォトリア(有料)のものを使用させて頂きました！

元のページへ戻るイカ（？）のイラストはマウスオーバーでブルブルします。
サンプル作ってたら楽しくなってしまいました。

サンプルのhtmlコードは以下です。

head内プラグイン部分

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jqfloat.js"></script>
<script>
$(document).ready(function() {
  // 雲の指定
   $('.cloud').jqFloat({
   	  width:0,
      height: 20,
      speed: 1500
   });
   // 虫のクモの指定
   $('.kumo').jqFloat({
   	  width:0,
      height: 80,
      speed: 1000
   });
   // はちの指定
   $('.hati, .tonbo').jqFloat({
   	  width:250,
      height: 50,
      speed: 500
   });
   // いかの指定
   $('.ika').jqFloat('stop',{
		width:5,
		height:0,
		speed:10
	});
	$('.ika').hover(function() {
		$(this).jqFloat('play');
	}, function() {
		$(this).jqFloat('stop');
	});
});
</script>

サンプルのイラスト部分htmlコードは以下です。

<section id="content">
	<img class="cloud" src="images/kumo.png" alt="雲" width="837" height="245">
	<img class="kumo" src="images/illust1.png" alt="くも" width="42" height="150">
	<img class="hati" src="images/illust2.png" alt="はち" width="36" height="40">
	<img class="tonbo" src="images/illust3.png" alt="トンボ" width="53" height="53">
	<a href="#"><img class="ika" src="images/illust4.png" alt="元のページへ戻る" width="76" height="86"></a>
</section>

サンプルのcssのコードは以下のようになってます。

#content{
	min-height: 550px;	
	position: relative;
}
.cloud{
	position: absolute;
	top:0;
	left: 50%;
	margin-left: -420px;
}
.kumo{
	position: absolute;	
	top:-100px;
	right:150px;
}
.hati{
	position: absolute;	
	top:50%;
	left: 30%;
}
.tonbo{
	position: absolute;	
	top:50%;
	right: 20%;
}
.ika{
	position: absolute;	
	bottom: 0;
	left: 10%;
}