要素を小刻みに動かしたり、浮かしているようにするjQuery

カテゴリーから探す

年別から見る

2012/05/03

要素を小刻みに動かしたり、浮かしているようにするjQuery

今回、3つのjQueryを紹介します。

ひとつは、要素を小刻みに動かすプラグイン。

iphoneのアイコンを長押しした時のような動きになります。

jQuery Wiggle plugin

もうひとつは、要素をぷかぷか浮かせたりすることができるプラグインです。

jqFloat.js – A Floating Effect with jQuery!

最後は、弊社代表が作成したスクロールの位置に応じて、

アニメーションさせることができるプラグインです。

sf_scroll_trick.js

一先ず、デモをご覧ください。

chromeとfirefoxのアイコンが動いています。

その下へスクロールすると、位置に応じて各ブラウザのアイコンが小刻みに動きます。

クリックすることでもON/OFFにすることができます。

DEMO

使い方は、まず、


<script src="js/jquery.wiggle.js"></script>

<script src="js/jqfloat.js"></script>

<script src="js/sf_scroll_trick.js"></script>

を読み込みます。あとは、それぞれ


$(object).wiggle();

$(object).jqFloat();

sf_scroll_trick( {
		"object": "動き,開始位置,終了位置 "
		});

$(object).wiggle();

$(object).jqFloat();

sf_scroll_trick( {

"object": "動き,開始位置,終了位置 "

});

と指定するだけです。オプションで設定もできます。例としてDEMOのソースをご覧ください。

jquery


$(document).ready(function() {
		//クリックで動きをONとOFFに設定
		$('.wiggle1').toggle( 
		function ()	{
			$(this).wiggle("start");
		},
		function ()	{
			$(this).wiggle("stop");
		});

		$('.float1').jqFloat({
			width: 100,
			height: 100
		});
		$('.float2').jqFloat({
			width: 100,
			height: 100
		});
		sf_scroll_trick( {
		".chrome": "wiggle,600,900 ",
		".firefox": "wiggle,800,1100",
		".ie": "wiggle,1000,1300",
		".safari": "wiggle,1200,1500"
		});
	});

$(document).ready(function() {

//クリックで動きをONとOFFに設定

$('.wiggle1').toggle(

function () {

$(this).wiggle("start");

function () {

$(this).wiggle("stop");

});

$('.float1').jqFloat({

width: 100,

height: 100

});

$('.float2').jqFloat({

width: 100,

height: 100

});

sf_scroll_trick( {

".chrome": "wiggle,600,900 ",

".firefox": "wiggle,800,1100",

".ie": "wiggle,1000,1300",

".safari": "wiggle,1200,1500"

});

css

jquery.wiggle.jsについては、cssは特に設定していないので割愛します。


.content
{
position: relative;
}
.float1
{
	position: absolute;
	left: 100px;
	top: 100px;
}
.float2
{
	position: absolute;
	left: 300px;
	top: 300px;
}

.content

{

position: relative;

}

.float1

{

position: absolute;

left: 100px;

top: 100px;

}

.float2

{

position: absolute;

left: 300px;

top: 300px;

}

html

HTMLについて特に特別なことはしていません。


<img src="images/Chrome.png" class="float1" width="100">
<img src="images/Firefox.png" class="float2" width="100">

1 2	<img src="images/Chrome.png" class="float1" width="100"> <img src="images/Firefox.png" class="float2" width="100">


<dl class="box pat1">
            	<dt><img src="images/Chrome.png" width="100" class="wiggle1 chrome"></dt>
                <dd>なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。</dd>
            </dl>
            <dl class="box pat2">
            	<dt><img src="images/Firefox.png" width="100" class="wiggle1 firefox"></dt>
                <dd>なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。</dd>
            </dl>
            <dl class="box pat1">
            	<dt><img src="images/IE.png" width="100" class="wiggle1 ie"></dt>
                <dd>なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。</dd>
            </dl>
            <dl class="box pat2">
            	<dt><img src="images/Safari.png" width="100" class="wiggle1 safari"></dt>
                <dd>なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。</dd>
            </dl>

<dd>なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。なにかの説明をここに入れてみたり。</dd>

</dl>