指定要素をふわふわさせたりブルブルさせたりする事ができる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プラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS