このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/Vague.js"></script>
<script>
    $(window).load(function(){
		var _vague01 = $('#VagueDemo01 img').Vague({intensity:30});
		var _vague02 = $('#VagueDemo02 img').Vague({intensity:30});
		$('#VagueDemo01 button').on('click', $.proxy(_vague01.toggleblur, _vague01));
		$('#VagueDemo02 button').on('click', function(){
			$this = $(this);
			var _val = parseInt($this.attr('data-val'));
			$this.prop('disabled', true);
			_vague02.animate(_val, { duration: 800 }).done(function(){
					$this.prop('disabled', false).attr('data-val', Math.abs(_val -100));
				});

		});
    });
</script>
<div id="VagueDemo01" class="Vague-demo">
	<p><button class="yellow">ぼかし切り替え</button></p>
	<p><img src="<PATH>/img12.jpg" alt=""></p>
</div>

<div id="VagueDemo02" class="Vague-demo">
	<p><button class="yellow" data-val="100">ぼかし切り替え(アニメーション)</button></p>
	<p><img src="<PATH>/imgb23.jpg" alt="" width="90%"></p>
</div>

Vagueについて

Vagueは、要素にブラーアニメーションをセットできるプラグインです。 IE10,11は対応していません。7,8,9は対応しています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • color

    color

    jQueryのanimateメソッドでは実現できない色のアニメーションを可能にする

  • FlipOutCards

    FlipOutCards

    複数の要素をフリップアニメーションで表示できる

  • kwicks

    kwicks

    スライドパネルでマウスオーバーした要素の高さ、幅をミョーンと伸ばしてくれる

  • Sticker

    Sticker

    Stickerは、壁に貼ったステッカーを剥がすような動きを表現できる

  • Flip

    Flip

    Flipは、フリップアニメーションを簡単に実装できる