jQuery

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

September 16, 2014

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