指定要素をふわふわさせたりブルブルさせたりする事ができるjQueryプラグイン-jqFloat

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

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%;
}

Related Article

2 Comments & Tracbacks

  • mio 2013-08-08 10:48 PM

    はじめまして。
    こういうプラグインを探していたので、とても助かり、思わずコメントさせていただきました。
    記事もわかりやすくサンプルも可愛らしいですね。

    良記事どうもありがとうございます!!

    Reply

    • saori 2013-08-09 11:23 AM

      mio さん
      初めまして。この記事がお役に立てたならとてもうれしいです。
      mioさんのサイトも拝見しました。イラストが印象的な素敵なデザインですね!
      こちらこそコメントありがとうございました!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ