オブジェクトを良い感じでぼかしてくれるjQueryプラグイン Vague.js

オブジェクトを良い感じでぼかしてくれるjQueryプラグイン Vague.jsを試してみた。

※画面をクリックして下さい

設定は非常に簡単で、HTMLは


&lt;figure class="container"&gt;&lt;/figure&gt;

1	<figure class="container"></figure>

JSは


var vague = $( '.container' ).Vague({intensity:40});
vague.blur();

1 2	var vague = $( '.container' ).Vague({intensity:40}); vague.blur();

これだけ。

今回は


$(document).ready(function()
{
	$( '.container' ).toggle(
		function ()
		{
			var vague = $( '.container' ).Vague({intensity:40});
			vague.blur();
		},
		function ()
		{
			var vague = $( '.container' ).Vague({intensity:0});
			vague.blur();
		}
	);
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$(document).ready(function()

{

$( '.container' ).toggle(

function ()

{

var vague = $( '.container' ).Vague({intensity:40});

vague.blur();

},

function ()

{

var vague = $( '.container' ).Vague({intensity:0});

vague.blur();

}

);

});

このようにしました。

setTimeoutでだんだんぼかすこともできるので

デモ

ティザーや凝ったメインビジュアルのエフェクトなどに使えるかもしれない。

ちなみに上記デモのソースはこんな感じ。


var c = 0;

function set_vague( a )
{
	var vague = $( '.container' ).Vague({intensity:a});
	vague.blur();

	if ( c &lt; 100 )
	{
		c++;
		setTimeout( 'set_vague( ' + c + ' )', 10 );
	}
}

$(document).ready(function()
{
	set_vague( c );
});

1

2

3

4

5

6

7

8

9

10

11

12