jQuery

【jQuery】背景画像にぼかし効果を与えるImage Blur Plugin

May 3, 2017

Image Blur Pluginは軽量で背景画像にぼかし効果を与えるjQueryプラグイン。

JS

<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>

HTML

<div id='some-element'></div>

ぼかし画像

$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
});

ぼかし画像をフェードイン

$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
    duration: 1000, // If the image needs to be faded in, how long that should take
    endOpacity : 1 // Specify the final opacity that the image will have
});

ぼかし画像をフェードインし、別画像に切り替える

// Initialize the blur
$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
    duration: 1000, // If the image needs to be faded in, how long that should take
    endOpacity : 1 // Specify the final opacity that the image will have
});

//Switch the image
$('#some-element').backgroundBlur('http://URL-of-another-image');

MITライセンス

Demo/Download