jquery-blurr

jQuery Plugin to create nice blur backgrounds from an image. Want to see an example? Have a look here: http://freshnode.co.uk/jquery.blurr/example

Support

• IE 8/9 (partial)
• IE 9+ (full)
• Chrome (desktop/mobile)
• Firefox
• Opera
• Safari (desktop/mobile)

Not supported, yet

• Safari on Windows

Not tested

• iPad

Required

• jQuery (most versions will work)
• Blurr
• A web page
• Some divs

Example inclusion

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

How to install

First, make sure jQuery is included on the page above the inclusion of jquery.blurr.js. Then, grab yourself an image. Any size will do (TM).

Create a div, like so:

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

Note, you'll need that div inside the Blurr div. This is used by the plugin to ensure the text you enter is visible above the blurred graphic.

Now, initialise the plugin:

$(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)
    });
});

And sit back to watch the glory unfold.

Example

An example is available in the root of this repository in the index.html page.