Search code examples
jqueryios7overlayblur

Using blur.js to achieve Gaussian blur effect

http://blurjs.com

In the website above, the windows create a Gaussian blur effect like looking through frosted glass. I could put any text/image/element behind each of those windows and the blur effect of those things will be seen.

So I tried the blur.js plugin itself, but it's simply not working for me:

CSS:

body {
background-image: url(orangewallpaper.jpg);
}

#bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background: #FFF;
background-size: cover !important;
}

HTML:

<div id="bg"></div>

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

<script>
$(document).ready( function() {
$('#bg').blurjs({
    source: 'body',
    radius: 30,
    overlay: 'rgba(0, 0, 0, .2)'
   });
});
</script>

..and what I'm getting as a result is just a blank white coloured website for some reason, not the Gaussian blur effect as intended.

Could anyone help to see what is wrong with my code exactly? I don't see how I missed anything out yet I'm not getting the result.

Solution

  • You are calling blur.js before jQuery. Blur.js require jQuery to run. It is a jQuery plugin.