このプラグインの実際の動きを確認したい場合は、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プラグイン

  • transit

    transit

    animateメソッドを使うように手軽にcss3のtransitionアニメーションなどが使える

  • Flip

    Flip

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

  • shapeshift

    shapeshift

    不揃いな要素をできるだけ隙間がなくなるように敷き詰めてくれる

  • gridly

    gridly

    要素を格子状に配置し、それを移動させることができる

  • color

    color

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