【jQuery】画像にぼかし効果を与えて、背景にするプラグインBlurr

blurr
いい感じのblur(ぼかし)効果プラグインだったのでメモ。
画像は加工しないで、WEBページ内でぼかし効果を実装できるプラグイン。

JS

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.blurr.js"></script>

HTML

<div class="blur-this" data-href="example-image.jpg"><div>Text content inside the blur</div></div>

プラグインを初期化

$(document).ready(function() {
$('.blur-this').blurr({
height: 300, // Height, in pixels of this blurred div.
sharpness: 40, // Sharpness, as a number between 0-100. 100 is very sharp, 0 is extremely blurry
offsetX: 0, // The x (left - right) offset of the image
offsetY: 0, // The y (top - bottom) offset of the image
callback: null // Callback to be called after the blur has been rendered. Recieves the following arguments (href, offsetX, offsetY, sharpness)
});
});

ライセンスはMIT

 

【jQuery】画像にぼかし効果を与えて、背景にするプラグインBlurr

  • LATEST
  • RELATED
  • POPULAR