2013/07/03
オブジェクトを良い感じでぼかしてくれるjQueryプラグイン Vague.js
オブジェクトを良い感じでぼかしてくれるjQueryプラグイン Vague.jsを試してみた。
※画面をクリックして下さい
設定は非常に簡単で、HTMLは
|
1 | <figure class="container"></figure> |
JSは
|
1 2 | var vague = $( '.container' ).Vague({intensity:40}); 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でだんだんぼかすこともできるので
ティザーや凝ったメインビジュアルのエフェクトなどに使えるかもしれない。
ちなみに上記デモのソースはこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var c = 0; function set_vague( a ) { var vague = $( '.container' ).Vague({intensity:a}); vague.blur(); if ( c < 100 ) { c++; setTimeout( 'set_vague( ' + c + ' )', 10 ); } } $(document).ready(function() { set_vague( c ); }); |
余談ですが、ミャンマー ではJoomlaとDrupalが大流行していました。
おそらくこの流れはイギリスとアメリカからだと思います。
(そっち系の会社の人が多かったため)
私も名前だけは聞いたこと有りましたが
仕様はしらず、Joomlaに関してはECのモジュールまであるようで
単純なCMSから、予約サイトやECなど高度なシステムまで作られているそうです。
Joomla
http://ja.wikipedia.org/wiki/Joomla!
Drupal
http://ja.wikipedia.org/wiki/Drupal
機会があればがちでいじくり回しておくといいと思います
Author Profile
SHARE